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 { BureauNav } from "@/components/bureau-nav";
import { getLocale } from "@/components/locale-toggle";
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 navLocale = await getLocale();

  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();

  // Reader-facing: no detective surfacing. Every kind reads as "case
  // investigation in progress" with neutral copy. Detective identities
  // remain internal in the runtime (audit log) but never reach the UI.
  const detectiveName = "Investigation in progress";
  const detectiveSubtitle =
    job.kind === "case_report"   ? "Assembling a narrative case file from the primary record" :
    job.kind === "evidence_chain" ? "Pulling verbatim citations from the document"           :
                                     "Reading the archive for this case";
  const detectiveTone = "text-[#e0c080]";
  const detectiveBg = "from-[rgba(224,192,128,0.06)]";
  const payload = (job.payload ?? {}) as Record<string, unknown>;
  const question = (payload.question ?? payload.topic ?? payload.hypothesis_id ?? payload.person_id) as string | undefined;
  const questionLabel =
    job.kind === "contradiction_scan" ? "Topic" :
    job.kind === "red_team_review" ? "Hypothesis under attack" :
    job.kind === "witness_analysis" ? "Witness under analysis" :
    job.kind === "outlier_scan" ? "Topic to outlier-scan" :
    job.kind === "calibrate_hypothesis" ? "Hypothesis under recalibration" :
    job.kind === "case_report" ? "Case to assemble" :
    "Question";
  const docId = payload.doc_id as string | undefined;

  return (
    <div className="min-h-screen bg-[#0a0e1a] text-[#e7ecf3]">
      <BureauNav locale={navLocale} crumbs={[
        { label: "bureau", href: "/bureau" },
        { label: "jobs", href: "/bureau#jobs" },
        { label: job.job_id.slice(0, 8) },
      ]} />
      <div className="mx-auto max-w-5xl px-4 py-6 pt-4">

        <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">{detectiveSubtitle}</p>
            </div>
            <span className={`px-2 py-0.5 rounded text-[10px] font-mono uppercase border ${detectiveTone} border-current`}>
              {job.kind}
            </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">{questionLabel}</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>
  );
}