AITrader/app/routes/jobs/$jobId.tsx

/* TRADINGGRAPH related file */

import { useEffect, useState } from "react";
import { useLoaderData } from "react-router";
import Navbar from "../../components/Navbar";

export const meta = () => [{ title: "Job Detail - AITrader" }];

export async function loader({ params, request }: { params: { jobId: string }; request: Request }) {
  const jobId = params.jobId;
  if (!jobId) return Response.json({ error: "jobId required" }, { status: 400 });
  const reqUrl = new URL(request.url);
  const host = request.headers.get("host") || reqUrl.host;
  const protocol = reqUrl.protocol;
  const baseUrl = `${protocol}//${host}`;

  try {
    const res = await fetch(`${baseUrl}/api/jobs/${jobId}`);
    const body = res.ok ? await res.json() : null;
    return Response.json(body);
  } catch (err) {
    console.error("/jobs loader error:", err);
    return Response.json({ error: "internal" }, { status: 500 });
  }
}

export default function JobDetail() {
  const initial = useLoaderData() as any;
  const [job, setJob] = useState<any>(initial);

  useEffect(() => {
    let cancelled = false;
    const poll = async () => {
      try {
        const id = job?.id || initial?.id;
        if (!id) return;
        const res = await fetch(`/api/jobs/${id}`);
        if (!res.ok) return;
        const j = await res.json();
        if (cancelled) return;
        setJob(j);
        if (j.state === "completed" || j.state === "failed") return;
      } catch (e) {
        // ignore
      }
      setTimeout(poll, 3000);
    };
    poll();
    return () => { cancelled = true; };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
      <Navbar />
      <div className="mx-auto max-w-4xl px-6 py-8">
        <h1 className="text-2xl font-bold text-gray-900 mb-4">Job {job?.id}</h1>
        <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-200 text-gray-900">
          <div className="mb-3 text-sm text-gray-700">State: <strong className="ml-2">{job?.state}</strong></div>
          {job?.failedReason && (
            <div className="mb-3 text-red-600">Failed: {job.failedReason}</div>
          )}

          <div className="flex items-center gap-3 mb-3">
            {job?.state === 'waiting' || job?.state === 'queued' ? (
              <button
                onClick={async () => {
                  try {
                    const res = await fetch(`/api/jobs/${job?.id}/cancel`, { method: 'POST' });
                    if (res.ok) {
                      const d = await res.json();
                      if (d.cancelled) {
                        setJob((prev: any) => ({ ...(prev || {}), state: 'failed', failedReason: 'cancelled' }));
                      }
                    }
                  } catch (e) {
                    // ignore
                  }
                }}
                className="text-sm text-red-600 hover:underline"
              >
                Cancel Job
              </button>
            ) : null}

            <a href={`/api/jobs/${job?.id}`} target="_blank" rel="noreferrer" className="text-sm text-blue-600 hover:underline">Open API</a>
          </div>

          <div className="text-sm text-gray-700 mb-3">Raw Data:</div>
          <pre className="bg-gray-50 p-3 rounded text-xs overflow-x-auto text-gray-800">{JSON.stringify(job?.data || job?.returnValue || job, null, 2)}</pre>

          {/* TradingGraph structured output */}
          {job?.returnValue && (
            <div className="mt-4 bg-white rounded-lg p-4 border border-gray-200 text-gray-900">
              <h4 className="text-lg font-semibold mb-3">TradingGraph Result</h4>

              {/* Decision summary */}
              {job.returnValue.action && (
                <div className="mb-3">
                  <div className="text-sm text-gray-600">Decision:</div>
                  <div className="text-base font-medium">{String(job.returnValue.action).toUpperCase()} <span className="text-sm text-gray-500">(confidence: {Number(job.returnValue.confidence ?? 0).toFixed(2)})</span></div>
                  {job.returnValue.reasoning && <div className="mt-2 text-sm text-gray-700">{job.returnValue.reasoning}</div>}
                </div>
              )}

              {/* Agent signals / analyst reports */}
              {Array.isArray(job.returnValue.agentSignals) && job.returnValue.agentSignals.length > 0 && (
                <div className="mb-3">
                  <div className="text-sm text-gray-600">Analyst Reports</div>
                  <div className="mt-2 space-y-2">
                    {job.returnValue.agentSignals.map((s: any, i: number) => (
                      <div key={i} className="p-3 bg-gray-50 rounded border border-gray-100">
                        <div className="flex items-center justify-between">
                          <div className="font-medium capitalize">{s.agent}</div>
                          <div className="text-sm text-gray-500">{s.signal} ({Math.round((s.confidence ?? 0) * 100)}%)</div>
                        </div>
                        {s.reasoning && <div className="mt-1 text-sm text-gray-700">{s.reasoning}</div>}
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Debate rounds (if present) */}
              {Array.isArray(job.returnValue.debateRounds) && job.returnValue.debateRounds.length > 0 && (
                <div className="mb-3">
                  <div className="text-sm text-gray-600">Debate Rounds</div>
                  <div className="mt-2 space-y-2">
                    {job.returnValue.debateRounds.map((d: any, i: number) => (
                      <div key={i} className="p-3 bg-gray-50 rounded border border-gray-100">
                        <div className="text-sm font-medium">Researcher: {d.researcher ?? 'unknown'}</div>
                        {d.bullishView && <div className="mt-1 text-sm text-green-600">Bullish: {d.bullishView}</div>}
                        {d.bearishView && <div className="mt-1 text-sm text-red-600">Bearish: {d.bearishView}</div>}
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Execution plan */}
              {job.returnValue.executionPlan && (
                <div className="mb-3">
                  <div className="text-sm text-gray-600">Execution Plan</div>
                  <div className="mt-2 text-sm text-gray-700">
                    {job.returnValue.executionPlan.amount != null && (<div>Amount: <strong>{job.returnValue.executionPlan.amount}</strong></div>)}
                    {job.returnValue.executionPlan.takeProfit != null && (<div>Take profit: <strong>${job.returnValue.executionPlan.takeProfit}</strong></div>)}
                    {job.returnValue.executionPlan.stopLoss != null && (<div>Stop loss: <strong>${job.returnValue.executionPlan.stopLoss}</strong></div>)}
                    {job.returnValue.executionPlan.riskManagement?.maxLossPercent != null && (<div>Risk: <strong>{job.returnValue.executionPlan.riskManagement.maxLossPercent}%</strong></div>)}
                  </div>
                </div>
              )}

              {/* LLM review if available */}
              {job.returnValue.executionPlan?._llmReview && (
                <div className="mt-4 bg-white rounded-lg p-3 border border-gray-200 text-gray-900">
                  <h4 className="text-sm font-medium">LLM Review</h4>
                  <div className="mt-2 text-sm text-gray-700">
                    <div>Approved: <strong className={job.returnValue.executionPlan._llmReview.approved ? 'text-green-600' : 'text-red-600'}>{job.returnValue.executionPlan._llmReview.approved ? 'Yes' : 'No'}</strong></div>
                    {job.returnValue.executionPlan._llmReview.notes && (
                      <div className="mt-1">Notes: <span className="font-medium text-gray-800">{job.returnValue.executionPlan._llmReview.notes}</span></div>
                    )}
                  </div>
                </div>
              )}

            </div>
          )}
        </div>
      </div>
    </div>
  );
}