468 lines
21 KiB
TypeScript
468 lines
21 KiB
TypeScript
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" }];
|
|
|
|
interface LoaderData {
|
|
ticker: string;
|
|
position: { qty: number; avg_entry_price: number; current_price: number; market_value: number; unrealized_pl: number } | null;
|
|
orders: any[];
|
|
bars: any[];
|
|
timeframe: string;
|
|
range: string;
|
|
}
|
|
|
|
const TIMEFRAMES = [
|
|
{ value: "1Min", label: "1 Minute" },
|
|
{ value: "1D", label: "1 Day" },
|
|
{ value: "5Min", label: "5 Min" },
|
|
{ value: "15Min", label: "15 Min" },
|
|
{ value: "1H", label: "1 Hour" },
|
|
{ value: "1W", label: "1 Week" },
|
|
];
|
|
|
|
const RANGES = [
|
|
{ value: "1D", label: "1 Day" },
|
|
{ value: "1W", label: "1 Week" },
|
|
{ value: "1M", label: "1 Month" },
|
|
{ value: "3M", label: "3 Months" },
|
|
{ value: "1Y", label: "1 Year" },
|
|
{ value: "3Y", label: "3 Years" },
|
|
{ value: "ALL", label: "All" },
|
|
];
|
|
|
|
export async function loader({ params, request }: { params: { ticker: string }; request: Request }) {
|
|
const ticker = params.ticker?.toUpperCase() || "";
|
|
const url = new URL(request.url);
|
|
const timeframe = url.searchParams.get("timeframe") || "1D";
|
|
const range = url.searchParams.get("range") || "1M";
|
|
|
|
// Build base URL from request for server-side fetches
|
|
const reqUrl = new URL(request.url);
|
|
const host = request.headers.get("host") || reqUrl.host;
|
|
const protocol = reqUrl.protocol;
|
|
const baseUrl = `${protocol}//${host}`;
|
|
|
|
let position = null;
|
|
let orders = [];
|
|
let bars = [];
|
|
|
|
try {
|
|
// Fetch positions
|
|
const posRes = await fetch(`${baseUrl}/api/alpaca/positions`);
|
|
const positions = posRes.ok ? await posRes.json() : [];
|
|
position = positions.find((p: any) => p.ticker === ticker) ?? null;
|
|
|
|
// Fetch orders
|
|
const ordRes = await fetch(`${baseUrl}/api/alpaca/orders`);
|
|
const ordersData = ordRes.ok ? await ordRes.json() : { orders: [] };
|
|
orders = ordersData.orders?.filter((o: any) => o.symbol === ticker) || [];
|
|
|
|
// Fetch bars for chart with timeframe and range
|
|
const barsRes = await fetch(`${baseUrl}/api/alpaca/quote/${ticker}?timeframe=${timeframe}&range=${range}`);
|
|
const barsData = barsRes.ok ? await barsRes.json() : null;
|
|
bars = barsData?.bars || [];
|
|
} catch (err) {
|
|
console.error(`analyze/${ticker}: loader error`, err);
|
|
}
|
|
|
|
return Response.json({ ticker, position, orders, bars, timeframe, range });
|
|
}
|
|
|
|
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);
|
|
searchParams.set("timeframe", newTimeframe);
|
|
searchParams.set("range", newRange);
|
|
navigate(`${location.pathname}?${searchParams.toString()}`, { replace: true });
|
|
};
|
|
|
|
const runTradingGraph = async () => {
|
|
setAnalysisLoading(true);
|
|
setAnalystReports([]);
|
|
setDebateRounds([]);
|
|
setDecision(null);
|
|
|
|
try {
|
|
// Ensure ticker is saved in DB before analysis
|
|
try {
|
|
const fd = new FormData();
|
|
fd.append("ticker", ticker);
|
|
await fetch("/api/stocks", { method: "POST", body: fd });
|
|
} catch (e) {
|
|
console.warn("Failed to ensure ticker saved:", e);
|
|
}
|
|
|
|
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);
|
|
|
|
// Save last decision/explanation to DB
|
|
try {
|
|
const fd2 = new FormData();
|
|
fd2.append("ticker", ticker);
|
|
fd2.append("lastDecision", data.action ?? "");
|
|
fd2.append("lastExplanation", data.reasoning ?? "");
|
|
if (data.executionPlan) fd2.append("lastExecutionPlan", JSON.stringify(data.executionPlan));
|
|
await fetch("/api/stocks", { method: "POST", body: fd2 });
|
|
} catch (e) {
|
|
console.warn("Failed to save decision to DB:", e);
|
|
}
|
|
|
|
// 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
|
|
const sortedBars = [...(bars || [])].sort((a, b) => {
|
|
const timeA = a.t ? new Date(a.t).getTime() : 0;
|
|
const timeB = b.t ? new Date(b.t).getTime() : 0;
|
|
return timeA - timeB;
|
|
});
|
|
|
|
const chartData = sortedBars?.map((bar: any) => {
|
|
// Handle timestamp - could be string, number, or Date
|
|
let time: string | number = "";
|
|
if (bar.t) {
|
|
const date = new Date(bar.t);
|
|
if (!isNaN(date.getTime())) {
|
|
// Use Unix timestamp for intraday, date string for daily
|
|
time = ["1Min", "5Min", "15Min", "30Min", "1H"].includes(timeframe)
|
|
? Math.floor(date.getTime() / 1000)
|
|
: date.toISOString().split('T')[0];
|
|
}
|
|
}
|
|
return {
|
|
time,
|
|
open: bar.o,
|
|
high: bar.h,
|
|
low: bar.l,
|
|
close: bar.c,
|
|
};
|
|
})
|
|
// Remove duplicates by time (keep first occurrence) and filter valid bars
|
|
.filter((bar: any, index: number, arr: any[]) =>
|
|
bar.time && bar.open != null && bar.high != null && bar.low != null && bar.close != null &&
|
|
index === arr.findIndex((b: any) => b.time === bar.time)
|
|
) || [];
|
|
|
|
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">{ticker} Detail</h1>
|
|
|
|
<div className="bg-white rounded-xl shadow-lg p-6 mb-6 border border-gray-200">
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<span className="text-gray-700 font-medium">Timeframe:</span>
|
|
<select
|
|
value={timeframe}
|
|
onChange={(e) => updateParams(e.target.value, range)}
|
|
className="border border-gray-300 rounded-lg px-3 py-1.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
{TIMEFRAMES.map((tf) => (
|
|
<option key={tf.value} value={tf.value}>{tf.label}</option>
|
|
))}
|
|
</select>
|
|
|
|
<span className="text-gray-700 font-medium">Range:</span>
|
|
<select
|
|
value={range}
|
|
onChange={(e) => updateParams(timeframe, e.target.value)}
|
|
className="border border-gray-300 rounded-lg px-3 py-1.5 text-gray-900 focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
{RANGES.map((r) => (
|
|
<option key={r.value} value={r.value}>{r.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<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">
|
|
<h2 className="text-xl font-bold text-gray-900 mb-4">Position</h2>
|
|
{position ? (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<tbody>
|
|
<tr className="border-b border-gray-100">
|
|
<td className="py-2 px-3 font-medium text-gray-700">Quantity</td>
|
|
<td className="py-2 px-3 text-gray-900">{position.qty} shares</td>
|
|
</tr>
|
|
<tr className="border-b border-gray-100">
|
|
<td className="py-2 px-3 font-medium text-gray-700">Ticker</td>
|
|
<td className="py-2 px-3 text-gray-900">{ticker}</td>
|
|
</tr>
|
|
<tr className="border-b border-gray-100">
|
|
<td className="py-2 px-3 font-medium text-gray-700">Current Value</td>
|
|
<td className="py-2 px-3 text-gray-900">${position.market_value.toFixed(2)}</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="py-2 px-3 font-medium text-gray-700">Earnings</td>
|
|
<td className={`py-2 px-3 font-bold ${position.unrealized_pl >= 0 ? "text-green-600" : "text-red-600"}`}>
|
|
${position.unrealized_pl.toFixed(2)}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<p className="text-gray-600">No position held</p>
|
|
)}
|
|
</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>
|
|
|
|
{/* Order suggestion summary */}
|
|
<div className="mt-3 bg-gray-50 rounded-lg p-3 border border-gray-200">
|
|
<h5 className="text-sm font-medium text-gray-800">Order Suggestion</h5>
|
|
<div className="text-sm text-gray-700 mt-2">
|
|
<div>
|
|
<span className="font-medium">{decision.action.toUpperCase()}</span>
|
|
{decision.executionPlan.amount} shares
|
|
{decision.executionPlan.takeProfit != null && (
|
|
<span> — Take profit: ${decision.executionPlan.takeProfit}</span>
|
|
)}
|
|
</div>
|
|
{decision.executionPlan.riskManagement?.maxLossPercent != null && (
|
|
<div className="text-xs text-gray-500">Risk: {decision.executionPlan.riskManagement.maxLossPercent}% max loss</div>
|
|
)}
|
|
</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 ? (
|
|
<p className="text-gray-500">No orders found for {ticker}</p>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-2 px-3 font-medium text-gray-700">Side</th>
|
|
<th className="text-left py-2 px-3 font-medium text-gray-700">Qty</th>
|
|
<th className="text-left py-2 px-3 font-medium text-gray-700">Status</th>
|
|
<th className="text-left py-2 px-3 font-medium text-gray-700">Filled Price</th>
|
|
<th className="text-left py-2 px-3 font-medium text-gray-700">Filled At</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{orders.map((order: any, i: number) => (
|
|
<tr key={order.id || i} className="border-b border-gray-100">
|
|
<td className="py-2 px-3">
|
|
<span className={order.side === "buy" ? "text-green-600" : "text-red-600"}>
|
|
{order.side?.toUpperCase()}
|
|
</span>
|
|
</td>
|
|
<td className="py-2 px-3 text-gray-900">{order.qty}</td>
|
|
<td className="py-2 px-3 text-gray-900">{order.status}</td>
|
|
<td className="py-2 px-3 text-gray-900">
|
|
{order.filled_avg_price ? `$${parseFloat(order.filled_avg_price).toFixed(2)}` : "-"}
|
|
</td>
|
|
<td className="py-2 px-3 text-gray-600">
|
|
{order.filled_at ? new Date(order.filled_at).toLocaleDateString() : "-"}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |