disclosure-bureau/web/app/jobs/[id]/page.tsx

/**
 * /jobs/[id] — Investigation Bureau case file viewer.
 *
 * Server-rendered shell with the first snapshot fetched directly from
 * pg (one round-trip). A client island then polls /api/jobs/[id] every 3s
 * while the job is non-terminal (queued | running).
 *
 * Detectives:
 *   - hypothesis_tournament → Sherlock Holmes
 *   - evidence_chain → Edmond Locard
 *
 * Renders:
 *   - Phase tracker (queued → claimed → running → complete | failed)
 *   - Hypothesis cards w/ prior+posterior bars + Tetlock confidence_band badge
 *   - Evidence cards w/ grade A/B/C badge + verbatim_excerpt + bbox crop link
 */
import { notFound } from "next/navigation";
import Link from "next/link";
import { pgQuery } from "@/lib/retrieval/db";
import { AuthBar } from "@/components/auth-bar";
import { JobStatusPoller } from "@/components/job-status-poller";

export const runtime = "nodejs";
export const dynamic = "force-dynamic";

interface InitialJob {
  job_id: string;
  kind: string;
  payload: Record<string, unknown> | null;
  status: string;
  worker_id: string | null;
  started_at: string | null;
  finished_at: string | null;
  outputs: unknown;
  error: string | null;
  created_at: string;
}

export default async function JobPage({
  params,
}: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  if (!/^[0-9a-f-]{36}$/i.test(id)) notFound();

  const rows = await pgQuery<InitialJob>(
    `SELECT job_id, kind, payload, status, worker_id, started_at, finished_at,
            outputs, error, created_at
       FROM public.investigation_jobs WHERE job_id = $1`,
    [id],
  ).catch(() => [] as InitialJob[]);
  const job = rows[0];
  if (!job) notFound();

  const isHolmes = job.kind === "hypothesis_tournament";
  const detectiveName = isHolmes ? "Sherlock Holmes" : "Edmond Locard";
  const detectiveSlug = isHolmes ? "holmes" : "locard";
  const detectiveTone = isHolmes ? "text-[#7fdbff]" : "text-[#06d6a0]";
  const detectiveBg = isHolmes ? "from-[rgba(127,219,255,0.08)]" : "from-[rgba(6,214,160,0.08)]";
  const question = (job.payload as Record<string, unknown>)?.question as string | undefined;
  const docId = (job.payload as Record<string, unknown>)?.doc_id as string | undefined;

  return (
    <div className="min-h-screen bg-[#0a0e1a] text-[#e7ecf3]">
      <AuthBar />
      <div className="mx-auto max-w-5xl px-4 py-8 pt-16">
        <div className="text-[11px] text-[#5a6678] font-mono mb-2">
          <Link href="/" className="hover:text-[#7fdbff]">disclosure.top</Link>
          <span className="mx-1">/</span>
          <span>investigation</span>
          <span className="mx-1">/</span>
          <span className="text-[#7fdbff]">{job.job_id.slice(0, 8)}</span>
        </div>

        <div className={`rounded-lg border border-[rgba(127,219,255,0.18)] bg-gradient-to-br ${detectiveBg} to-transparent p-5`}>
          <div className="flex items-baseline justify-between gap-4 flex-wrap">
            <div>
              <h1 className={`text-2xl font-mono font-bold ${detectiveTone}`}>
                {detectiveName}
              </h1>
              <p className="text-[12px] text-[#9aa6b8] mt-1 font-mono">
                {isHolmes
                  ? "Hypothesis tournament · rival hypotheses with Bayesian update"
                  : "Evidence chain · verbatim quotes with chain of custody (Locard)"}
              </p>
            </div>
            <span className={`px-2 py-0.5 rounded text-[10px] font-mono uppercase border ${detectiveTone} border-current`}>
              {detectiveSlug}
            </span>
          </div>

          {question && (
            <div className="mt-4 p-3 bg-[#060a13] rounded border border-[rgba(127,219,255,0.1)]">
              <div className="text-[10px] text-[#5a6678] font-mono uppercase mb-1">Question</div>
              <div className="text-[14px] text-[#e7ecf3] leading-snug">{question}</div>
            </div>
          )}
          {docId && (
            <div className="mt-2 text-[11px] font-mono text-[#9aa6b8]">
              Scope: <Link href={`/d/${docId}`} className="text-[#7fdbff] hover:underline">{docId}</Link>
            </div>
          )}
        </div>

        <JobStatusPoller
          jobId={job.job_id}
          initialJob={{
            job_id: job.job_id,
            kind: job.kind,
            payload: job.payload,
            status: job.status,
            worker_id: job.worker_id,
            started_at: job.started_at,
            finished_at: job.finished_at,
            created_at: job.created_at,
            outputs: Array.isArray(job.outputs) ? job.outputs : [],
            error: job.error,
          }}
        />
      </div>
    </div>
  );
}