605 lines
25 KiB
TypeScript
605 lines
25 KiB
TypeScript
import { useState, useEffect, useCallback } from "react";
|
|
import { useLoaderData, useNavigate, useLocation, Link } from "react-router";
|
|
import TradingViewChart from "../components/TradingViewChart";
|
|
import Navbar from "../components/Navbar";
|
|
import { useMemo } from "react";
|
|
import type { TradingDecision, AnalystReport, DebateRound } from "../types/agents";
|
|
|
|
export const meta = () => [{ title: "Stock Detail - AITrader" }];
|
|
|
|
const barsCache = new Map<string, { bars: any[]; timestamp: number }>();
|
|
const CACHE_TTL_MS = 5 * 60 * 1000;
|
|
|
|
function getCachedBars(key: string): any[] | null {
|
|
const entry = barsCache.get(key);
|
|
if (entry && Date.now() - entry.timestamp < CACHE_TTL_MS) return entry.bars;
|
|
if (entry) barsCache.delete(key);
|
|
return null;
|
|
}
|
|
|
|
function setCachedBars(key: string, bars: any[]) {
|
|
barsCache.set(key, { bars, timestamp: Date.now() });
|
|
}
|
|
|
|
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;
|
|
stockRecord?: any;
|
|
latestJob?: any;
|
|
runningJob?: any;
|
|
}
|
|
|
|
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";
|
|
|
|
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 = [];
|
|
let stockRecord: any = null;
|
|
let latestJob: any = null;
|
|
let runningJob: any = null;
|
|
|
|
try {
|
|
const posRes = await fetch(`${baseUrl}/api/alpaca/positions`);
|
|
const positions = posRes.ok ? await posRes.json() : [];
|
|
position = positions.find((p: any) => p.ticker === ticker) ?? null;
|
|
|
|
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) || [];
|
|
|
|
const barsCacheKey = `${ticker}-${timeframe}-${range}`;
|
|
const cachedBars = getCachedBars(barsCacheKey);
|
|
if (cachedBars) {
|
|
bars = cachedBars;
|
|
} else {
|
|
const barsRes = await fetch(`${baseUrl}/api/alpaca/quote/${ticker}?timeframe=${timeframe}&range=${range}`);
|
|
const barsData = barsRes.ok ? await barsRes.json() : null;
|
|
bars = barsData?.bars || [];
|
|
if (bars.length > 0) setCachedBars(barsCacheKey, bars);
|
|
}
|
|
|
|
try {
|
|
const stockRes = await fetch(`${baseUrl}/api/stocks`);
|
|
if (stockRes.ok) {
|
|
const list = await stockRes.json();
|
|
stockRecord = list.find((s: any) => s.ticker === ticker) || null;
|
|
}
|
|
} catch (e) { /* ignore */ }
|
|
|
|
// Fetch latest completed job for this ticker
|
|
if (stockRecord?.lastJobId) {
|
|
try {
|
|
const jobRes = await fetch(`${baseUrl}/api/jobs/${stockRecord.lastJobId}`);
|
|
if (jobRes.ok) latestJob = await jobRes.json();
|
|
} catch (e) { /* ignore */ }
|
|
}
|
|
|
|
// Check for any currently running/active jobs for this ticker
|
|
try {
|
|
const jobsRes = await fetch(`${baseUrl}/api/jobs?ticker=${encodeURIComponent(ticker)}&limit=20`);
|
|
if (jobsRes.ok) {
|
|
const jobsData = await jobsRes.json();
|
|
runningJob = (jobsData.jobs || []).find((j: any) => j.state === "active" || j.state === "waiting") || null;
|
|
}
|
|
} catch (e) { /* ignore */ }
|
|
} catch (err) {
|
|
console.error(`analyze/${ticker}: loader error`, err);
|
|
}
|
|
|
|
return Response.json({ ticker, position, orders, bars, timeframe, range, stockRecord, latestJob, runningJob });
|
|
}
|
|
|
|
function stateBadge(state: string) {
|
|
const cls = state === "completed" ? "bg-green-100 text-green-700"
|
|
: state === "failed" ? "bg-red-100 text-red-700"
|
|
: state === "active" ? "bg-blue-100 text-blue-700"
|
|
: "bg-yellow-100 text-yellow-700";
|
|
return <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${cls}`}>{state}</span>;
|
|
}
|
|
|
|
function DecisionBadge({ decision }: { decision: TradingDecision }) {
|
|
const color = decision.action === "buy" ? "text-green-600" : decision.action === "sell" ? "text-red-600" : "text-gray-500";
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<span className={`text-2xl font-bold ${color}`}>{decision.action.toUpperCase()}</span>
|
|
<span className="text-sm text-gray-500">{(decision.confidence * 100).toFixed(0)}% confidence</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ExecutionPlanCompact({ plan }: { plan: TradingDecision["executionPlan"] }) {
|
|
if (!plan) return null;
|
|
return (
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs">
|
|
{plan.amount != null && <div><span className="text-gray-500">Qty</span><div className="font-medium">{plan.amount} shares</div></div>}
|
|
{plan.takeProfit != null && <div><span className="text-gray-500">Take Profit</span><div className="font-medium text-green-600">${plan.takeProfit}</div></div>}
|
|
{plan.stopLoss != null && <div><span className="text-gray-500">Stop Loss</span><div className="font-medium text-red-600">${plan.stopLoss}</div></div>}
|
|
{plan.riskManagement?.maxLossPercent != null && <div><span className="text-gray-500">Risk</span><div className="font-medium">{plan.riskManagement.maxLossPercent}%</div></div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AgentSignalRow({ signal }: { signal: any }) {
|
|
const sigColor = signal.signal === "bullish" ? "text-green-600" : signal.signal === "bearish" ? "text-red-600" : "text-gray-500";
|
|
return (
|
|
<div className="flex items-start justify-between gap-2 py-1.5 border-b border-gray-100 last:border-0">
|
|
<div className="flex-1 min-w-0">
|
|
<span className="text-xs font-medium capitalize text-gray-700">{signal.agent}</span>
|
|
{signal.reasoning && <p className="text-xs text-gray-500 truncate">{signal.reasoning}</p>}
|
|
</div>
|
|
<span className={`text-xs font-medium whitespace-nowrap ${sigColor}`}>{signal.signal} {(signal.confidence * 100).toFixed(0)}%</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DebateCompact({ rounds }: { rounds: DebateRound[] }) {
|
|
if (!rounds?.length) return null;
|
|
return (
|
|
<div className="space-y-1.5">
|
|
{rounds.slice(0, 3).map((r, i) => (
|
|
<div key={i} className="text-xs grid grid-cols-2 gap-2">
|
|
<div className="text-green-700 bg-green-50 rounded px-2 py-1 truncate" title={r.bullishView}>📈 {r.bullishView}</div>
|
|
<div className="text-red-700 bg-red-50 rounded px-2 py-1 truncate" title={r.bearishView}>📉 {r.bearishView}</div>
|
|
</div>
|
|
))}
|
|
{rounds.length > 3 && <div className="text-xs text-gray-400">+{rounds.length - 3} more rounds</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PositionCard({ position, ticker }: { position: LoaderData["position"]; ticker: string }) {
|
|
if (!position) return (
|
|
<div className="bg-white rounded-xl shadow-lg p-4 border border-gray-200">
|
|
<h3 className="text-sm font-semibold text-gray-800 mb-2">Position</h3>
|
|
<p className="text-sm text-gray-500">No position held</p>
|
|
</div>
|
|
);
|
|
|
|
const pnlColor = position.unrealized_pl >= 0 ? "text-green-600" : "text-red-600";
|
|
const pnlSign = position.unrealized_pl >= 0 ? "+" : "";
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl shadow-lg p-4 border border-gray-200">
|
|
<h3 className="text-sm font-semibold text-gray-800 mb-3">Position — {ticker}</h3>
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
|
|
<div><span className="text-gray-500 text-xs">Qty</span><div className="font-medium">{position.qty}</div></div>
|
|
<div><span className="text-gray-500 text-xs">Avg Entry</span><div className="font-medium">${position.avg_entry_price?.toFixed(2)}</div></div>
|
|
<div><span className="text-gray-500 text-xs">Current</span><div className="font-medium">${position.current_price?.toFixed(2)}</div></div>
|
|
<div><span className="text-gray-500 text-xs">P&L</span><div className={`font-bold ${pnlColor}`}>{pnlSign}${position.unrealized_pl?.toFixed(2)}</div></div>
|
|
</div>
|
|
<div className="mt-2 text-xs text-gray-500">Market value: ${position.market_value?.toFixed(2)}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function OrdersCard({ orders, ticker }: { orders: any[]; ticker: string }) {
|
|
if (!orders.length) return (
|
|
<div className="bg-white rounded-xl shadow-lg p-4 border border-gray-200">
|
|
<h3 className="text-sm font-semibold text-gray-800 mb-2">Orders</h3>
|
|
<p className="text-sm text-gray-500">No orders for {ticker}</p>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl shadow-lg p-4 border border-gray-200">
|
|
<h3 className="text-sm font-semibold text-gray-800 mb-3">Orders — {ticker}</h3>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-xs">
|
|
<thead>
|
|
<tr className="border-b border-gray-200">
|
|
<th className="text-left py-1.5 px-2 font-medium text-gray-500">Side</th>
|
|
<th className="text-left py-1.5 px-2 font-medium text-gray-500">Qty</th>
|
|
<th className="text-left py-1.5 px-2 font-medium text-gray-500">Status</th>
|
|
<th className="text-left py-1.5 px-2 font-medium text-gray-500">Price</th>
|
|
<th className="text-left py-1.5 px-2 font-medium text-gray-500">Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{orders.slice(0, 5).map((order: any, i: number) => (
|
|
<tr key={order.id || i} className="border-b border-gray-100">
|
|
<td className="py-1.5 px-2">
|
|
<span className={order.side === "buy" ? "text-green-600 font-medium" : "text-red-600 font-medium"}>{order.side?.toUpperCase()}</span>
|
|
</td>
|
|
<td className="py-1.5 px-2">{order.qty}</td>
|
|
<td className="py-1.5 px-2">{stateBadge(order.status)}</td>
|
|
<td className="py-1.5 px-2">{order.filled_avg_price ? `$${parseFloat(order.filled_avg_price).toFixed(2)}` : "-"}</td>
|
|
<td className="py-1.5 px-2 text-gray-500">{order.filled_at ? new Date(order.filled_at).toLocaleDateString() : "-"}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function JobHistoryInline({ ticker, runningJob, latestJob, onJobSelect }: { ticker: string; runningJob: any; latestJob: any; onJobSelect: (job: any) => void }) {
|
|
const [jobs, setJobs] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const fetchJobs = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch(`/api/jobs?ticker=${encodeURIComponent(ticker)}&limit=10`);
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setJobs(data.jobs || []);
|
|
}
|
|
} catch (e) {
|
|
console.warn("Failed to fetch jobs:", e);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [ticker]);
|
|
|
|
useEffect(() => {
|
|
fetchJobs();
|
|
const id = setInterval(fetchJobs, 8000);
|
|
return () => clearInterval(id);
|
|
}, [fetchJobs]);
|
|
|
|
const cancel = async (jobId: string) => {
|
|
try {
|
|
await fetch(`/api/jobs/${jobId}/cancel`, { method: "POST" });
|
|
fetchJobs();
|
|
} catch (e) { console.warn("Cancel failed:", e); }
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl shadow-lg p-4 border border-gray-200">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="text-sm font-semibold text-gray-800">Job History</h3>
|
|
<button onClick={fetchJobs} className="text-xs text-blue-600 hover:underline">Refresh</button>
|
|
</div>
|
|
|
|
{/* Running job banner */}
|
|
{runningJob && (
|
|
<div className="mb-3 p-2 bg-blue-50 border border-blue-200 rounded-lg flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="animate-pulse w-2 h-2 bg-blue-500 rounded-full" />
|
|
<span className="text-xs font-medium text-blue-700">Running: {runningJob.id}</span>
|
|
</div>
|
|
{stateBadge(runningJob.state)}
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="space-y-2">
|
|
<div className="h-8 bg-gray-100 rounded animate-pulse" />
|
|
<div className="h-8 bg-gray-100 rounded animate-pulse" />
|
|
</div>
|
|
) : jobs.length === 0 ? (
|
|
<p className="text-xs text-gray-500">No jobs for {ticker}</p>
|
|
) : (
|
|
<div className="space-y-1.5 max-h-48 overflow-y-auto">
|
|
{jobs.map((j: any) => (
|
|
<div key={j.id} className="flex items-center justify-between p-2 bg-gray-50 rounded text-xs">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
{stateBadge(j.state)}
|
|
<span className="font-mono truncate text-gray-700">{j.id}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
{(j.state === "waiting") && (
|
|
<button onClick={() => cancel(j.id)} className="text-red-600 hover:underline">Cancel</button>
|
|
)}
|
|
<button onClick={() => onJobSelect(j)} className="text-blue-600 hover:underline">View</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TradingResultCard({ job, expanded }: { job: any; expanded: boolean }) {
|
|
const decision = job?.returnValue;
|
|
if (!decision) return null;
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl shadow-lg p-4 border border-gray-200">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="text-sm font-semibold text-gray-800">Latest Analysis Result</h3>
|
|
<span className="text-xs text-gray-400">{new Date(job.timestamp || Date.now()).toLocaleString()}</span>
|
|
</div>
|
|
|
|
<DecisionBadge decision={decision} />
|
|
|
|
{decision.reasoning && <p className="text-sm text-gray-600 mt-2">{decision.reasoning}</p>}
|
|
|
|
{expanded && decision.executionPlan && (
|
|
<div className="mt-3 pt-3 border-t border-gray-100">
|
|
<h4 className="text-xs font-medium text-gray-700 mb-2">Execution Plan</h4>
|
|
<ExecutionPlanCompact plan={decision.executionPlan} />
|
|
</div>
|
|
)}
|
|
|
|
{expanded && decision.agentSignals?.length > 0 && (
|
|
<div className="mt-3 pt-3 border-t border-gray-100">
|
|
<h4 className="text-xs font-medium text-gray-700 mb-2">Agent Signals</h4>
|
|
<div className="space-y-0">
|
|
{decision.agentSignals.map((s: any, i: number) => <AgentSignalRow key={i} signal={s} />)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{expanded && decision.debateRounds?.length > 0 && (
|
|
<div className="mt-3 pt-3 border-t border-gray-100">
|
|
<h4 className="text-xs font-medium text-gray-700 mb-2">Debate Rounds</h4>
|
|
<DebateCompact rounds={decision.debateRounds} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function StockDetail() {
|
|
const { ticker, position, orders, bars, timeframe, range, stockRecord, latestJob, runningJob } = useLoaderData() as LoaderData;
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const [analysisLoading, setAnalysisLoading] = useState(false);
|
|
const [jobStatus, setJobStatus] = useState<any>(runningJob || null);
|
|
const [jobPolling, setJobPolling] = useState(!!runningJob);
|
|
const [showExpanded, setShowExpanded] = useState(false);
|
|
const [selectedJob, setSelectedJob] = useState<any>(latestJob || null);
|
|
|
|
const cacheKey = `tradinggraph-${ticker}`;
|
|
|
|
// Poll running job if exists
|
|
useEffect(() => {
|
|
if (!runningJob) return;
|
|
let cancelled = false;
|
|
let timer: ReturnType<typeof setTimeout> | null = null;
|
|
let currentController: AbortController | null = null;
|
|
|
|
const poll = async () => {
|
|
if (currentController) { try { currentController.abort(); } catch (e) {} }
|
|
currentController = new AbortController();
|
|
try {
|
|
const res = await fetch(`/api/jobs/${runningJob.id}`, { signal: currentController.signal });
|
|
if (!res.ok) { if (!cancelled) timer = setTimeout(poll, 2000); return; }
|
|
const j = await res.json();
|
|
if (cancelled) return;
|
|
setJobStatus(j);
|
|
if (j.state === "completed" || j.state === "failed") {
|
|
setJobPolling(false);
|
|
cancelled = true;
|
|
setSelectedJob(j);
|
|
}
|
|
} catch (e: any) {
|
|
if (e?.name !== "AbortError") console.warn("Poll error:", e);
|
|
} finally {
|
|
if (!cancelled) timer = setTimeout(poll, 2000);
|
|
}
|
|
};
|
|
poll();
|
|
return () => { cancelled = true; if (timer) clearTimeout(timer); if (currentController) { try { currentController.abort(); } catch (e) {} } };
|
|
}, [runningJob?.id]);
|
|
|
|
// Load cached results
|
|
useEffect(() => {
|
|
const cached = sessionStorage.getItem(cacheKey);
|
|
if (cached) {
|
|
try {
|
|
const data = JSON.parse(cached);
|
|
if (data.decision) setSelectedJob({ returnValue: data.decision, timestamp: data.timestamp });
|
|
} catch (e) { /* ignore */ }
|
|
}
|
|
}, [cacheKey]);
|
|
|
|
const [priceStream, setPriceStream] = useState<any>(null);
|
|
useEffect(() => {
|
|
let es: EventSource | null = null;
|
|
let listeners: ((p: number) => void)[] = [];
|
|
if (typeof window !== "undefined" && typeof EventSource !== "undefined") {
|
|
try {
|
|
es = new EventSource(`/api/price-stream?ticker=${encodeURIComponent(ticker)}&timeframe=${encodeURIComponent(timeframe)}`);
|
|
es.onmessage = (e) => {
|
|
try {
|
|
const d = JSON.parse(e.data);
|
|
if (d?.price != null) listeners.forEach((cb) => cb(d.price));
|
|
} catch (err) { /* ignore */ }
|
|
};
|
|
const streamObj = {
|
|
subscribe(cb: (p: number) => void) {
|
|
listeners.push(cb);
|
|
return () => { listeners = listeners.filter((c) => c !== cb); };
|
|
},
|
|
};
|
|
setPriceStream(streamObj);
|
|
} catch (e) { console.warn("Failed to create price EventSource", e); }
|
|
}
|
|
return () => { try { if (es) es.close(); } catch (e) {} setPriceStream(null); };
|
|
}, [ticker]);
|
|
|
|
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);
|
|
try {
|
|
try {
|
|
const fd = new FormData();
|
|
fd.append("ticker", ticker);
|
|
await fetch("/api/stocks", { method: "POST", body: fd });
|
|
} catch (e) { console.warn("Failed to save ticker:", e); }
|
|
|
|
const res = await fetch("/api/analyze", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ ticker, background: true }),
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (res.status === 202 && data.jobId) {
|
|
const jobId = data.jobId;
|
|
try {
|
|
const fd2 = new FormData();
|
|
fd2.append("ticker", ticker);
|
|
fd2.append("lastJobId", jobId);
|
|
await fetch("/api/stocks", { method: "POST", body: fd2 });
|
|
} catch (e) { console.warn("Failed to save lastJobId:", e); }
|
|
|
|
setJobPolling(true);
|
|
setJobStatus({ id: jobId, state: "queued" });
|
|
let cancelled = false;
|
|
let timer: ReturnType<typeof setTimeout> | null = null;
|
|
let currentController: AbortController | null = null;
|
|
|
|
const poll = async () => {
|
|
if (currentController) { try { currentController.abort(); } catch (e) {} }
|
|
currentController = new AbortController();
|
|
try {
|
|
const jr = await fetch(`/api/jobs/${jobId}`, { signal: currentController.signal });
|
|
if (!jr.ok) { if (!cancelled) timer = setTimeout(poll, 2000); return; }
|
|
const j = await jr.json();
|
|
if (cancelled) return;
|
|
setJobStatus(j);
|
|
if (j.state === "completed" || j.state === "failed") {
|
|
setJobPolling(false);
|
|
cancelled = true;
|
|
setSelectedJob(j);
|
|
}
|
|
} catch (e: any) {
|
|
if (e?.name !== "AbortError") console.warn("Poll error:", e);
|
|
} finally {
|
|
if (!cancelled) timer = setTimeout(poll, 2000);
|
|
}
|
|
};
|
|
poll();
|
|
return;
|
|
}
|
|
|
|
if (!res.ok) throw new Error(data.error || "Analysis failed");
|
|
setSelectedJob({ returnValue: data, timestamp: Date.now() });
|
|
sessionStorage.setItem(cacheKey, JSON.stringify({ decision: data, timestamp: Date.now() }));
|
|
} catch (err) {
|
|
console.error("Analysis error:", err);
|
|
} finally {
|
|
setAnalysisLoading(false);
|
|
}
|
|
};
|
|
|
|
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) => {
|
|
let time: string | number = "";
|
|
if (bar.t) {
|
|
const date = new Date(bar.t);
|
|
if (!isNaN(date.getTime())) {
|
|
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 };
|
|
}).filter((bar: any, index: number, arr: any[]) =>
|
|
bar.time && bar.open != null && index === arr.findIndex((b: any) => b.time === bar.time)
|
|
) || [];
|
|
|
|
const displayJob = selectedJob || (jobStatus?.state === "completed" ? jobStatus : null);
|
|
|
|
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">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h1 className="text-3xl font-bold text-gray-900">{ticker}</h1>
|
|
<button
|
|
onClick={runTradingGraph}
|
|
disabled={analysisLoading || jobPolling}
|
|
className="bg-purple-600 text-white px-5 py-2 rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50 transition-colors text-sm"
|
|
>
|
|
{analysisLoading ? "Starting..." : jobPolling ? `Analyzing... (${jobStatus?.state})` : "Run Analysis"}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Chart */}
|
|
<div className="bg-white rounded-xl shadow-lg p-4 mb-4 border border-gray-200">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<span className="text-xs text-gray-500">Timeframe:</span>
|
|
<select value={timeframe} onChange={(e) => updateParams(e.target.value, range)} className="border border-gray-300 rounded px-2 py-1 text-sm focus:ring-2 focus:ring-blue-500">
|
|
{TIMEFRAMES.map((tf) => <option key={tf.value} value={tf.value}>{tf.label}</option>)}
|
|
</select>
|
|
<span className="text-xs text-gray-500">Range:</span>
|
|
<select value={range} onChange={(e) => updateParams(timeframe, e.target.value)} className="border border-gray-300 rounded px-2 py-1 text-sm 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} priceStream={priceStream} />
|
|
</div>
|
|
|
|
{/* Position & Orders row */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
|
|
<PositionCard position={position} ticker={ticker} />
|
|
<OrdersCard orders={orders} ticker={ticker} />
|
|
</div>
|
|
|
|
{/* Latest analysis result */}
|
|
{displayJob && <TradingResultCard job={displayJob} expanded={showExpanded} />}
|
|
|
|
{/* Expand toggle */}
|
|
{displayJob && (
|
|
<div className="flex justify-center mt-2">
|
|
<button onClick={() => setShowExpanded((s) => !s)} className="text-xs text-blue-600 hover:underline">
|
|
{showExpanded ? "Show less" : "Show full analysis"}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Job history */}
|
|
<div className="mt-4">
|
|
<JobHistoryInline
|
|
ticker={ticker}
|
|
runningJob={jobPolling ? jobStatus : null}
|
|
latestJob={latestJob}
|
|
onJobSelect={(j) => { setSelectedJob(j); setShowExpanded(false); }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|