From 503a1c8bde66f0c3d20f5c73ae780c764d3c78ba Mon Sep 17 00:00:00 2001
From: Henry Winkel <Henry-Winkel@web.de>
Date: Thu, 14 May 2026 08:12:12 +0200
Subject: [PATCH] feat: add analyze page with dataflow visualization

---
 app/components/Navbar.tsx |   6 ++
 app/routes/analyze.tsx    | 205 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 211 insertions(+)
 create mode 100644 app/routes/analyze.tsx

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index a92e0a6..74d8040 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -19,6 +19,12 @@ export default function Navbar() {
           >
             Stocks
           </Link>
+          <Link 
+            to="/analyze" 
+            className="text-gray-600 hover:text-blue-600 font-medium transition-colors relative after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-0.5 after:bg-blue-600 after:transition-all hover:after:w-full"
+          >
+            Analyze
+          </Link>
         </div>
       </div>
     </nav>
diff --git a/app/routes/analyze.tsx b/app/routes/analyze.tsx
new file mode 100644
index 0000000..b173ca9
--- /dev/null
+++ b/app/routes/analyze.tsx
@@ -0,0 +1,205 @@
+import { useState } from "react";
+import Navbar from "../components/Navbar";
+import type { AgentSignal, AnalystReport, DebateRound, TradingDecision } from "../types/agents";
+
+type AnalysisStep = "input" | "analysts" | "researchers" | "trader" | "decision";
+
+interface AnalysisState {
+  ticker: string;
+  date: string;
+  analysts: AnalystReport[];
+  debates: DebateRound[];
+  decision: TradingDecision | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+const SignalBadge = ({ signal }: { signal: AgentSignal["signal"] }) => {
+  const colors = {
+    bullish: "bg-green-100 text-green-800",
+    bearish: "bg-red-100 text-red-800",
+    neutral: "bg-gray-100 text-gray-800",
+  };
+  return (
+    <span className={`px-2 py-1 rounded text-xs font-medium ${colors[signal]}`}>
+      {signal}
+    </span>
+  );
+};
+
+export const meta = () => {
+  return [
+    { title: "Analyze - AITrader" },
+    { name: "description", content: "Multi-agent trading analysis with dataflow visualization" },
+  ];
+};
+
+export default function Analyze() {
+  const [state, setState] = useState<AnalysisState>({
+    ticker: "",
+    date: new Date().toISOString().split("T")[0],
+    analysts: [],
+    debates: [],
+    decision: null,
+    isLoading: false,
+    error: null,
+  });
+
+  const [currentStep, setCurrentStep] = useState<AnalysisStep>("input");
+
+  const runAnalysis = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setState((s) => ({ ...s, isLoading: true, error: null }));
+
+    try {
+      const response = await fetch("/api/analyze", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ticker: state.ticker, date: state.date }),
+      });
+
+      if (!response.ok) throw new Error("Analysis failed");
+      const decision = await response.json();
+
+      setState((s) => ({
+        ...s,
+        decision,
+        isLoading: false,
+      }));
+      setCurrentStep("decision");
+    } catch (err) {
+      setState((s) => ({
+        ...s,
+        error: err instanceof Error ? err.message : "Unknown error",
+        isLoading: false,
+      }));
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+      <Navbar />
+      <div className="mx-auto max-w-7xl px-6 py-8">
+        <h1 className="text-3xl font-bold text-gray-900 mb-6">Multi-Agent Trading Analysis</h1>
+
+        <div className="bg-white rounded-xl shadow-lg p-6 mb-6">
+          <h2 className="text-xl font-bold text-gray-900 mb-4">Input Parameters</h2>
+          <form onSubmit={runAnalysis} className="flex gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Ticker</label>
+              <input
+                type="text"
+                value={state.ticker}
+                onChange={(e) => setState((s) => ({ ...s, ticker: e.target.value.toUpperCase() }))}
+                placeholder="AAPL"
+                className="border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500"
+                required
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Date</label>
+              <input
+                type="date"
+                value={state.date}
+                onChange={(e) => setState((s) => ({ ...s, date: e.target.value }))}
+                className="border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+            <div className="flex items-end">
+              <button
+                type="submit"
+                disabled={state.isLoading}
+                className="bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50"
+              >
+                {state.isLoading ? "Running..." : "Run Analysis"}
+              </button>
+            </div>
+          </form>
+        </div>
+
+        {state.error && (
+          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
+            {state.error}
+          </div>
+        )}
+
+        {currentStep !== "input" && (
+          <div className="space-y-6">
+            <div className="flex items-center gap-2 mb-4">
+              {["input", "analysts", "researchers", "trader", "decision"].map((step, i) => (
+                <div key={step} className="flex items-center">
+                  <div
+                    className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
+                      step === currentStep ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                    }`}
+                  >
+                    {i + 1}
+                  </div>
+                  {i < 4 && <div className="w-8 h-0.5 bg-gray-300 mx-1"></div>}
+                </div>
+              ))}
+            </div>
+
+            {state.analysts.length > 0 && (
+              <div className="bg-white rounded-xl shadow-lg p-6">
+                <h3 className="text-lg font-bold text-gray-900 mb-4">Analyst Reports</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {state.analysts.map((report, i) => (
+                    <div key={i} className="border border-gray-200 rounded-lg p-4">
+                      <div className="flex justify-between items-center mb-2">
+                        <span className="font-medium capitalize">{report.analyst}</span>
+                        <SignalBadge signal={report.signal.signal} />
+                      </div>
+                      <p className="text-sm text-gray-600">{report.report}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {state.debates.length > 0 && (
+              <div className="bg-white rounded-xl shadow-lg p-6">
+                <h3 className="text-lg font-bold text-gray-900 mb-4">Research Debate</h3>
+                {state.debates.map((debate, i) => (
+                  <div key={i} className="space-y-3">
+                    <div className="bg-green-50 rounded-lg p-3">
+                      <span className="text-xs font-semibold text-green-800">Bullish View:</span>
+                      <p className="text-sm mt-1">{debate.bullishView}</p>
+                    </div>
+                    <div className="bg-red-50 rounded-lg p-3">
+                      <span className="text-xs font-semibold text-red-800">Bearish View:</span>
+                      <p className="text-sm mt-1">{debate.bearishView}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {state.decision && (
+              <div className="bg-white rounded-xl shadow-lg p-6">
+                <h3 className="text-lg font-bold text-gray-900 mb-4">Trading Decision</h3>
+                <div className="flex items-center gap-4 mb-4">
+                  <span className="text-2xl font-bold capitalize">{state.decision.action}</span>
+                  <span className="text-gray-600">Confidence: {(state.decision.confidence * 100).toFixed(0)}%</span>
+                </div>
+                <p className="text-gray-700">{state.decision.reasoning}</p>
+                
+                <div className="mt-4">
+                  <span className="text-sm font-medium text-gray-600">Agent Signals:</span>
+                  <div className="flex flex-wrap gap-2 mt-2">
+                    {state.decision.agentSignals.map((s, i) => (
+                      <div key={i} className="flex items-center gap-1">
+                        <span className="text-xs capitalize">{s.agent}:</span>
+                        <SignalBadge signal={s.signal} />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file