disclosure-bureau/web/components/bureau-snapshot.tsx

/**
 * BureauSnapshot — homepage panel surfacing the Investigation Bureau's
 * live artefact stack.
 *
 * Reads counts + the 3 most-recent items from each table directly via pg.
 * Server component — renders straight into the homepage shell, no client
 * hydration cost.
 */
import Link from "next/link";
import { pgQuery } from "@/lib/retrieval/db";

interface CountRow { c: string }
interface RecentEvidence { evidence_id: string; grade: string; verbatim_excerpt: string; source_page_id: string; confidence_band: string | null }
interface RecentHypothesis { hypothesis_id: string; position: string; posterior: number | string | null; confidence_band: string | null; reviewed_by: string | null }
interface RecentContradiction { contradiction_id: string; topic: string; resolution_status: string }
interface RecentGap { gap_id: string; description: string; scope: unknown }
interface RecentWitness { witness_id: string; canonical_name: string | null; credibility: string | null; verdict: string | null }
interface RecentJob { job_id: string; kind: string; status: string; created_at: string; payload: Record<string, unknown> | null }

const DETECTIVES = [
  { slug: "holmes",      name: "Holmes",      role: "Hypothesis tournament",  tone: "text-[#7fdbff] border-[#7fdbff]" },
  { slug: "locard",      name: "Locard",      role: "Evidence chain",         tone: "text-[#06d6a0] border-[#06d6a0]" },
  { slug: "dupin",       name: "Dupin",       role: "Contradiction scan",     tone: "text-[#ff8a4d] border-[#ff8a4d]" },
  { slug: "schneier",    name: "Schneier",    role: "Red-team review",        tone: "text-[#ff3344] border-[#ff3344]" },
  { slug: "poirot",      name: "Poirot",      role: "Witness analysis",       tone: "text-[#9b5de5] border-[#9b5de5]" },
  { slug: "taleb",       name: "Taleb",       role: "Outlier hunter",         tone: "text-[#ffd23f] border-[#ffd23f]" },
  { slug: "tetlock",     name: "Tetlock",     role: "Posterior calibration",  tone: "text-[#26d4cc] border-[#26d4cc]" },
  { slug: "case-writer", name: "Case-Writer", role: "Five-act narrative",     tone: "text-[#e0c080] border-[#e0c080]" },
] as const;

const BAND_TONE: Record<string, string> = {
  high: "text-[#06d6a0]",
  medium: "text-[#3fde6a]",
  low: "text-[#ffa500]",
  speculation: "text-[#ff6ec7]",
};

const GRADE_TONE: Record<string, string> = {
  A: "text-[#06d6a0] border-[#06d6a0]",
  B: "text-[#3fde6a] border-[#3fde6a]",
  C: "text-[#ffa500] border-[#ffa500]",
};

async function loadSnapshot() {
  // Counts come from a single round-trip via UNION ALL.
  const counts = await pgQuery<CountRow & { k: string }>(
    `SELECT 'evidence' AS k, COUNT(*)::text AS c FROM public.evidence
   UNION ALL SELECT 'hypotheses', COUNT(*)::text FROM public.hypotheses
   UNION ALL SELECT 'contradictions', COUNT(*)::text FROM public.contradictions
   UNION ALL SELECT 'witnesses', COUNT(*)::text FROM public.witnesses
   UNION ALL SELECT 'gaps', COUNT(*)::text FROM public.gaps
   UNION ALL SELECT 'open_hyp', COUNT(*)::text FROM public.hypotheses WHERE status='open'
   UNION ALL SELECT 'jobs_running', COUNT(*)::text FROM public.investigation_jobs WHERE status IN ('queued','running')
   UNION ALL SELECT 'jobs_complete_24h', COUNT(*)::text FROM public.investigation_jobs WHERE status='complete' AND finished_at > NOW() - INTERVAL '24 hours'`,
  ).catch(() => [] as Array<CountRow & { k: string }>);

  const byKey: Record<string, number> = {};
  for (const r of counts) byKey[r.k] = Number(r.c);

  const [hyp, ev, ctr, gap, wit, jobs] = await Promise.all([
    pgQuery<RecentHypothesis>(
      `SELECT hypothesis_id, position, posterior, confidence_band, reviewed_by
         FROM public.hypotheses ORDER BY created_at DESC LIMIT 4`,
    ).catch(() => []),
    pgQuery<RecentEvidence>(
      `SELECT evidence_id, grade, verbatim_excerpt, source_page_id, confidence_band
         FROM public.evidence ORDER BY created_at DESC LIMIT 3`,
    ).catch(() => []),
    pgQuery<RecentContradiction>(
      `SELECT contradiction_id, topic, resolution_status
         FROM public.contradictions ORDER BY created_at DESC LIMIT 3`,
    ).catch(() => []),
    pgQuery<RecentGap>(
      `SELECT gap_id, description, scope FROM public.gaps ORDER BY created_at DESC LIMIT 3`,
    ).catch(() => []),
    pgQuery<RecentWitness>(
      `SELECT w.witness_id, e.canonical_name, w.credibility, w.verdict
         FROM public.witnesses w
    LEFT JOIN public.entities e ON e.entity_pk = w.person_entity_pk
        ORDER BY w.created_at DESC LIMIT 3`,
    ).catch(() => []),
    pgQuery<RecentJob>(
      `SELECT job_id, kind, status, created_at, payload
         FROM public.investigation_jobs ORDER BY created_at DESC LIMIT 6`,
    ).catch(() => []),
  ]);

  // Case reports live on disk. Read the reports dir.
  const { readdir, stat } = await import("node:fs/promises");
  const path = await import("node:path");
  const reportsDir = path.join(process.env.CASE_ROOT || "/data/ufo/case", "reports");
  let reports: Array<{ slug: string; mtimeMs: number }> = [];
  try {
    const files = await readdir(reportsDir);
    const items = await Promise.all(
      files.filter((f) => f.endsWith(".md")).map(async (f) => {
        const st = await stat(path.join(reportsDir, f));
        return { slug: f.replace(/\.md$/, ""), mtimeMs: st.mtimeMs };
      }),
    );
    reports = items.sort((a, b) => b.mtimeMs - a.mtimeMs).slice(0, 4);
  } catch { /* no reports yet — fine */ }

  return { counts: byKey, hyp, ev, ctr, gap, wit, jobs, reports };
}

export async function BureauSnapshot() {
  const snap = await loadSnapshot().catch(() => null);
  if (!snap) {
    return (
      <section className="mb-10 border border-dashed border-[rgba(127,219,255,0.18)] rounded-lg p-4 text-[11px] text-[#9aa6b8] font-mono">
        Investigation Bureau snapshot unavailable (db unreachable).
      </section>
    );
  }
  const { counts, hyp, ev, ctr, gap, wit, jobs, reports } = snap;
  const totalArtefacts = (counts.evidence ?? 0) + (counts.hypotheses ?? 0) + (counts.contradictions ?? 0)
    + (counts.witnesses ?? 0) + (counts.gaps ?? 0) + reports.length;
  const running = counts.jobs_running ?? 0;

  return (
    <section className="mb-10">
      {/* Section heading */}
      <div className="flex items-baseline justify-between mb-4 flex-wrap gap-2">
        <div>
          <h2 className="font-mono text-lg text-[#e7ecf3]">
            <span className="text-[#7fdbff]">▍</span> The Investigation Bureau
          </h2>
          <p className="text-[11px] text-[#5a6678] font-mono mt-1">
            8 AI detectives · {totalArtefacts} artefacts in the case folder
            {running > 0 && <span className="text-[#ffd23f]"> · {running} job{running === 1 ? "" : "s"} in progress</span>}
          </p>
        </div>
        <Link
          href="/bureau"
          className="font-mono text-xs px-3 py-1.5 border border-[#e0c080] text-[#e0c080] hover:bg-[rgba(224,192,128,0.10)] rounded"
        >
          → open the bureau
        </Link>
      </div>

      {/* Detective tiles */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-5">
        {DETECTIVES.map((d) => (
          <div
            key={d.slug}
            className={`border ${d.tone} bg-[#0d1220] rounded p-2 text-[11px] font-mono leading-snug`}
          >
            <div className="flex items-baseline justify-between">
              <span className="font-semibold">{d.name}</span>
              <span className="text-[9px] text-[#5a6678] uppercase">{d.slug}</span>
            </div>
            <div className="text-[10px] text-[#9aa6b8] mt-0.5">{d.role}</div>
          </div>
        ))}
      </div>

      {/* Counter row */}
      <div className="grid grid-cols-3 md:grid-cols-6 gap-2 mb-5 text-center">
        <Counter href="/bureau#evidence"       label="evidence"       value={counts.evidence ?? 0}       color="text-[#06d6a0]" />
        <Counter href="/bureau#hypotheses"     label="hypotheses"     value={counts.hypotheses ?? 0}     color="text-[#7fdbff]" />
        <Counter href="/bureau#contradictions" label="contradictions" value={counts.contradictions ?? 0} color="text-[#ff8a4d]" />
        <Counter href="/bureau#witnesses"      label="witnesses"      value={counts.witnesses ?? 0}      color="text-[#9b5de5]" />
        <Counter href="/bureau#outliers"       label="outliers"       value={counts.gaps ?? 0}           color="text-[#ffd23f]" />
        <Counter href="/bureau#reports"        label="case reports"   value={reports.length}              color="text-[#e0c080]" />
      </div>

      {/* Recent artefacts grid: hypotheses + contradictions + outliers + reports */}
      <div className="grid md:grid-cols-2 gap-3 mb-3">
        {hyp.length > 0 && (
          <ArtefactColumn
            title="Recent hypotheses"
            color="text-[#7fdbff]"
            border="border-[rgba(127,219,255,0.18)]"
          >
            {hyp.map((h) => {
              const post = h.posterior !== null ? Number(h.posterior) : null;
              const bandTone = (h.confidence_band && BAND_TONE[h.confidence_band]) || "text-[#9aa6b8]";
              return (
                <Link key={h.hypothesis_id} href={`/h/${h.hypothesis_id}`} className="block py-1.5 border-t border-[rgba(127,219,255,0.08)] first:border-t-0 hover:bg-[rgba(127,219,255,0.04)]">
                  <div className="flex items-baseline justify-between gap-2">
                    <span className="text-[10px] font-mono text-[#5a6678]">{h.hypothesis_id}</span>
                    <span className={`text-[10px] font-mono ${bandTone}`}>
                      {h.confidence_band ?? "—"}{post !== null && ` · ${post.toFixed(2)}`}
                    </span>
                  </div>
                  <div className="text-[12px] text-[#cbd2dd] leading-snug mt-0.5">{h.position}</div>
                  {h.reviewed_by && (
                    <div className="text-[9px] font-mono text-[#ff3344] mt-0.5">↳ reviewed by {h.reviewed_by}</div>
                  )}
                </Link>
              );
            })}
          </ArtefactColumn>
        )}

        {ctr.length > 0 && (
          <ArtefactColumn
            title="Recent contradictions"
            color="text-[#ff8a4d]"
            border="border-[rgba(255,138,77,0.18)]"
          >
            {ctr.map((c) => (
              <div key={c.contradiction_id} className="py-1.5 border-t border-[rgba(255,138,77,0.08)] first:border-t-0">
                <div className="flex items-baseline justify-between gap-2">
                  <span className="text-[10px] font-mono text-[#5a6678]">{c.contradiction_id}</span>
                  <span className="text-[10px] font-mono text-[#9aa6b8]">{c.resolution_status}</span>
                </div>
                <div className="text-[12px] text-[#cbd2dd] leading-snug mt-0.5">{c.topic}</div>
              </div>
            ))}
          </ArtefactColumn>
        )}

        {ev.length > 0 && (
          <ArtefactColumn
            title="Recent evidence"
            color="text-[#06d6a0]"
            border="border-[rgba(6,214,160,0.18)]"
          >
            {ev.map((e) => {
              const tone = (e.grade && GRADE_TONE[e.grade]) || "text-[#9aa6b8]";
              return (
                <div key={e.evidence_id} className="py-1.5 border-t border-[rgba(6,214,160,0.08)] first:border-t-0">
                  <div className="flex items-baseline justify-between gap-2">
                    <span className="text-[10px] font-mono text-[#5a6678]">{e.evidence_id}</span>
                    <span className={`text-[10px] font-mono ${tone} px-1.5 border rounded`}>Grade {e.grade}</span>
                  </div>
                  <blockquote className="text-[12px] text-[#cbd2dd] italic mt-0.5 leading-snug border-l-2 border-[#06d6a0] pl-2">
                    “{(e.verbatim_excerpt || "").slice(0, 140)}…”
                  </blockquote>
                </div>
              );
            })}
          </ArtefactColumn>
        )}

        {gap.length > 0 && (
          <ArtefactColumn
            title="Recent outliers"
            color="text-[#ffd23f]"
            border="border-[rgba(255,210,63,0.25)]"
          >
            {gap.map((g) => {
              const s = (g.scope ?? {}) as Record<string, unknown>;
              const title = (s.title as string) || g.description;
              return (
                <div key={g.gap_id} className="py-1.5 border-t border-[rgba(255,210,63,0.08)] first:border-t-0">
                  <div className="flex items-baseline justify-between gap-2">
                    <span className="text-[10px] font-mono text-[#5a6678]">{g.gap_id}</span>
                    {s.kind === "outlier" && (
                      <span className="text-[10px] font-mono text-[#ffd23f]">outlier</span>
                    )}
                  </div>
                  <div className="text-[12px] text-[#cbd2dd] leading-snug mt-0.5">{title}</div>
                </div>
              );
            })}
          </ArtefactColumn>
        )}

        {wit.length > 0 && (
          <ArtefactColumn
            title="Witness analyses"
            color="text-[#9b5de5]"
            border="border-[rgba(155,93,229,0.18)]"
          >
            {wit.map((w) => (
              <div key={w.witness_id} className="py-1.5 border-t border-[rgba(155,93,229,0.08)] first:border-t-0">
                <div className="flex items-baseline justify-between gap-2">
                  <span className="text-[10px] font-mono text-[#5a6678]">{w.witness_id}</span>
                  <span className="text-[10px] font-mono text-[#9b5de5]">{w.credibility ?? "—"}</span>
                </div>
                <div className="text-[12px] text-[#cbd2dd] leading-snug mt-0.5 font-semibold">{w.canonical_name ?? "—"}</div>
                {w.verdict && <div className="text-[11px] text-[#9aa6b8] mt-0.5 italic">{w.verdict.slice(0, 200)}</div>}
              </div>
            ))}
          </ArtefactColumn>
        )}

        {reports.length > 0 && (
          <ArtefactColumn
            title="Case reports"
            color="text-[#e0c080]"
            border="border-[rgba(224,192,128,0.25)]"
          >
            {reports.map((r) => (
              <Link key={r.slug} href={`/c/${r.slug}`} className="block py-1.5 border-t border-[rgba(224,192,128,0.08)] first:border-t-0 hover:bg-[rgba(224,192,128,0.04)]">
                <div className="text-[10px] font-mono text-[#5a6678]">case-report</div>
                <div className="text-[12px] text-[#e0c080] leading-snug mt-0.5 font-medium">/c/{r.slug}</div>
                <div className="text-[10px] font-mono text-[#5a6678] mt-0.5">Watson five-act narrative →</div>
              </Link>
            ))}
          </ArtefactColumn>
        )}
      </div>

      {/* Job activity strip */}
      {jobs.length > 0 && (
        <div className="text-[10px] font-mono text-[#5a6678] mt-2">
          Recent jobs:{" "}
          {jobs.slice(0, 4).map((j, i) => (
            <span key={j.job_id}>
              {i > 0 && <span className="text-[#3a4250]"> · </span>}
              <Link
                href={`/jobs/${j.job_id}`}
                className={`hover:underline ${
                  j.status === "complete" ? "text-[#06d6a0]" :
                  j.status === "failed"   ? "text-[#ff6ec7]" :
                  j.status === "running"  ? "text-[#ffd23f]" :
                                            "text-[#9aa6b8]"
                }`}
              >
                {j.kind}/{j.status}
              </Link>
            </span>
          ))}
        </div>
      )}
    </section>
  );
}

function Counter({ label, value, color, href }: { label: string; value: number; color: string; href: string }) {
  return (
    <Link href={href} className="block rounded border border-[rgba(127,219,255,0.08)] bg-[#0d1220] py-2 hover:border-[rgba(127,219,255,0.20)]">
      <div className={`text-2xl font-mono font-bold ${color}`}>{value}</div>
      <div className="text-[10px] font-mono text-[#5a6678] uppercase tracking-wider mt-0.5">{label}</div>
    </Link>
  );
}

function ArtefactColumn({
  title, color, border, children,
}: { title: string; color: string; border: string; children: React.ReactNode }) {
  return (
    <div className={`rounded-lg border ${border} bg-[#0d1220] p-3`}>
      <div className={`text-[10px] font-mono uppercase tracking-wider ${color} mb-1`}>{title}</div>
      <div>{children}</div>
    </div>
  );
}