feat(phase-23): add Threat Actor profiles with MITRE CTI import, API, heatmap and gap analysis (T-208 to T-212)

frontend/src/pages/ThreatActorDetailPage.tsx

@@ -0,0 +1,571 @@
+import { useParams, useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Loader2,
+  AlertCircle,
+  ArrowLeft,
+  Globe,
+  Target,
+  Shield,
+  ExternalLink,
+  BookOpen,
+  AlertTriangle,
+  CheckCircle,
+  XCircle,
+  Clock,
+  Crosshair,
+  FlaskConical,
+} from "lucide-react";
+import {
+  getThreatActor,
+  getThreatActorCoverage,
+  getThreatActorGaps,
+  type ThreatActorTechnique,
+  type GapItem,
+} from "../api/threat-actors";
+
+// ── MITRE ATT&CK Tactics in kill chain order ──────────────────────
+const TACTICS_ORDER = [
+  "reconnaissance",
+  "resource-development",
+  "initial-access",
+  "execution",
+  "persistence",
+  "privilege-escalation",
+  "defense-evasion",
+  "credential-access",
+  "discovery",
+  "lateral-movement",
+  "collection",
+  "command-and-control",
+  "exfiltration",
+  "impact",
+];
+
+/** Status → cell colour. */
+function statusCellColor(status: string | null) {
+  switch (status) {
+    case "validated":
+      return "bg-green-500/80 border-green-400/40";
+    case "partial":
+      return "bg-yellow-500/80 border-yellow-400/40";
+    case "in_progress":
+      return "bg-blue-500/60 border-blue-400/40";
+    case "not_covered":
+      return "bg-red-500/70 border-red-400/40";
+    case "not_evaluated":
+    default:
+      return "bg-gray-700/50 border-gray-600/40";
+  }
+}
+
+function statusLabel(status: string | null) {
+  switch (status) {
+    case "validated":
+      return "Validated";
+    case "partial":
+      return "Partial";
+    case "in_progress":
+      return "In Progress";
+    case "not_covered":
+      return "Not Covered";
+    case "review_required":
+      return "Review Required";
+    case "not_evaluated":
+    default:
+      return "Not Evaluated";
+  }
+}
+
+function statusIcon(status: string | null) {
+  switch (status) {
+    case "validated":
+      return <CheckCircle className="h-3.5 w-3.5 text-green-400" />;
+    case "partial":
+      return <AlertTriangle className="h-3.5 w-3.5 text-yellow-400" />;
+    case "in_progress":
+      return <Clock className="h-3.5 w-3.5 text-blue-400" />;
+    case "not_covered":
+      return <XCircle className="h-3.5 w-3.5 text-red-400" />;
+    default:
+      return <Shield className="h-3.5 w-3.5 text-gray-500" />;
+  }
+}
+
+export default function ThreatActorDetailPage() {
+  const { actorId } = useParams();
+  const navigate = useNavigate();
+
+  // ── Queries ─────────────────────────────────────────────────────
+  const { data: actor, isLoading, error } = useQuery({
+    queryKey: ["threat-actor", actorId],
+    queryFn: () => getThreatActor(actorId!),
+    enabled: !!actorId,
+  });
+
+  const { data: coverage } = useQuery({
+    queryKey: ["threat-actor-coverage", actorId],
+    queryFn: () => getThreatActorCoverage(actorId!),
+    enabled: !!actorId,
+  });
+
+  const { data: gaps } = useQuery({
+    queryKey: ["threat-actor-gaps", actorId],
+    queryFn: () => getThreatActorGaps(actorId!),
+    enabled: !!actorId,
+  });
+
+  // ── Loading / Error ─────────────────────────────────────────────
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-24">
+        <Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
+      </div>
+    );
+  }
+
+  if (error || !actor) {
+    return (
+      <div className="rounded-xl border border-red-500/30 bg-red-900/20 p-6 text-center">
+        <AlertCircle className="mx-auto h-8 w-8 text-red-400" />
+        <p className="mt-2 text-sm text-red-400">
+          {error ? (error as Error)?.message : "Threat actor not found"}
+        </p>
+      </div>
+    );
+  }
+
+  // ── Organise techniques by tactic for heatmap ───────────────────
+  const techniquesByTactic: Record<string, ThreatActorTechnique[]> = {};
+  for (const tech of actor.techniques) {
+    const tactic = tech.tactic || "unknown";
+    // A technique's tactic field may be comma-separated
+    const tactics = tactic.split(",").map((t) => t.trim().toLowerCase().replace(/\s+/g, "-"));
+    for (const t of tactics) {
+      if (!techniquesByTactic[t]) techniquesByTactic[t] = [];
+      techniquesByTactic[t].push(tech);
+    }
+  }
+
+  // Sort tactics by kill chain order
+  const orderedTactics = TACTICS_ORDER.filter((t) => techniquesByTactic[t]);
+  const unknownTactics = Object.keys(techniquesByTactic).filter(
+    (t) => !TACTICS_ORDER.includes(t)
+  );
+  const allTactics = [...orderedTactics, ...unknownTactics];
+
+  return (
+    <div className="space-y-6">
+      {/* Back Button */}
+      <button
+        onClick={() => navigate("/threat-actors")}
+        className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-white transition-colors"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        Back to Threat Actors
+      </button>
+
+      {/* ── SECTION 1: Header ──────────────────────────────────────── */}
+      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+        <div className="flex items-start justify-between">
+          <div>
+            <div className="flex items-center gap-3">
+              <Crosshair className="h-7 w-7 text-purple-400" />
+              <h1 className="text-2xl font-bold text-white">{actor.name}</h1>
+              {actor.mitre_id && (
+                <span className="rounded-full border border-purple-500/30 bg-purple-900/50 px-2.5 py-0.5 text-xs font-mono text-purple-400">
+                  {actor.mitre_id}
+                </span>
+              )}
+            </div>
+
+            {/* Aliases */}
+            {actor.aliases && actor.aliases.length > 0 && (
+              <div className="mt-2 flex flex-wrap gap-1.5">
+                {actor.aliases.map((alias, i) => (
+                  <span
+                    key={i}
+                    className="rounded-full border border-gray-700 bg-gray-800 px-2 py-0.5 text-xs text-gray-400"
+                  >
+                    {alias}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* MITRE link */}
+          {actor.mitre_url && (
+            <a
+              href={actor.mitre_url}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-1.5 rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-xs text-gray-400 hover:text-white transition-colors"
+            >
+              <ExternalLink className="h-3.5 w-3.5" />
+              MITRE ATT&CK
+            </a>
+          )}
+        </div>
+
+        {/* Meta badges */}
+        <div className="mt-4 flex flex-wrap items-center gap-3">
+          {actor.country && (
+            <span className="inline-flex items-center gap-1.5 rounded-full border border-gray-700 bg-gray-800 px-3 py-1 text-xs text-gray-300">
+              <Globe className="h-3.5 w-3.5 text-gray-500" />
+              {actor.country}
+            </span>
+          )}
+          {actor.motivation && (
+            <span className="inline-flex items-center gap-1.5 rounded-full border border-purple-500/30 bg-purple-900/50 px-3 py-1 text-xs text-purple-400">
+              <Target className="h-3.5 w-3.5" />
+              {actor.motivation}
+            </span>
+          )}
+          {actor.sophistication && (
+            <span className="inline-flex items-center gap-1.5 rounded-full border border-cyan-500/30 bg-cyan-900/50 px-3 py-1 text-xs text-cyan-400">
+              {actor.sophistication}
+            </span>
+          )}
+          {actor.first_seen && (
+            <span className="text-xs text-gray-500">
+              First seen: {actor.first_seen}
+            </span>
+          )}
+          {actor.last_seen && (
+            <span className="text-xs text-gray-500">
+              Last seen: {actor.last_seen}
+            </span>
+          )}
+        </div>
+
+        {/* Target sectors */}
+        {actor.target_sectors && actor.target_sectors.length > 0 && (
+          <div className="mt-3 flex items-center gap-2">
+            <Target className="h-4 w-4 text-gray-600 shrink-0" />
+            <div className="flex flex-wrap gap-1.5">
+              {actor.target_sectors.map((s, i) => (
+                <span
+                  key={i}
+                  className="rounded-full border border-gray-700 bg-gray-800 px-2 py-0.5 text-[11px] text-gray-400"
+                >
+                  {s}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ── SECTION 2: Description ─────────────────────────────────── */}
+      {actor.description && (
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+          <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">
+            Description
+          </h2>
+          <p className="text-sm leading-relaxed text-gray-300 whitespace-pre-line">
+            {actor.description}
+          </p>
+        </div>
+      )}
+
+      {/* ── SECTION 3: Coverage Overview ───────────────────────────── */}
+      {coverage && (
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
+            Coverage Overview
+          </h2>
+          <div className="grid gap-4 sm:grid-cols-4">
+            <div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
+              <p className="text-3xl font-bold text-white">{coverage.total_techniques}</p>
+              <p className="text-xs text-gray-400">Total Techniques</p>
+            </div>
+            <div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
+              <p className="text-3xl font-bold text-green-400">{coverage.covered}</p>
+              <p className="text-xs text-gray-400">Covered</p>
+            </div>
+            <div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
+              <p className="text-3xl font-bold text-red-400">
+                {coverage.total_techniques - coverage.covered}
+              </p>
+              <p className="text-xs text-gray-400">Gaps</p>
+            </div>
+            <div className="rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center">
+              <p className={`text-3xl font-bold ${
+                coverage.coverage_pct >= 80 ? "text-green-400" :
+                coverage.coverage_pct >= 50 ? "text-yellow-400" : "text-red-400"
+              }`}>
+                {coverage.coverage_pct}%
+              </p>
+              <p className="text-xs text-gray-400">Coverage</p>
+            </div>
+          </div>
+
+          {/* Breakdown bar */}
+          {coverage.total_techniques > 0 && (
+            <div className="mt-4">
+              <div className="flex h-3 overflow-hidden rounded-full bg-gray-800">
+                {coverage.breakdown.validated && (
+                  <div
+                    className="bg-green-500 transition-all"
+                    style={{
+                      width: `${(coverage.breakdown.validated / coverage.total_techniques) * 100}%`,
+                    }}
+                    title={`Validated: ${coverage.breakdown.validated}`}
+                  />
+                )}
+                {coverage.breakdown.partial && (
+                  <div
+                    className="bg-yellow-500 transition-all"
+                    style={{
+                      width: `${(coverage.breakdown.partial / coverage.total_techniques) * 100}%`,
+                    }}
+                    title={`Partial: ${coverage.breakdown.partial}`}
+                  />
+                )}
+                {coverage.breakdown.in_progress && (
+                  <div
+                    className="bg-blue-500 transition-all"
+                    style={{
+                      width: `${(coverage.breakdown.in_progress / coverage.total_techniques) * 100}%`,
+                    }}
+                    title={`In Progress: ${coverage.breakdown.in_progress}`}
+                  />
+                )}
+                {coverage.breakdown.not_covered && (
+                  <div
+                    className="bg-red-500/70 transition-all"
+                    style={{
+                      width: `${(coverage.breakdown.not_covered / coverage.total_techniques) * 100}%`,
+                    }}
+                    title={`Not Covered: ${coverage.breakdown.not_covered}`}
+                  />
+                )}
+              </div>
+              <div className="mt-2 flex flex-wrap gap-4 text-xs text-gray-400">
+                {Object.entries(coverage.breakdown).map(([status, count]) => (
+                  <span key={status} className="flex items-center gap-1.5">
+                    {statusIcon(status)}
+                    {statusLabel(status)}: {count}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ── SECTION 4: Technique Heatmap ───────────────────────────── */}
+      {allTactics.length > 0 && (
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
+            Technique Heatmap
+          </h2>
+
+          {/* Legend */}
+          <div className="mb-4 flex flex-wrap gap-3 text-xs">
+            <span className="flex items-center gap-1.5">
+              <span className="h-3 w-3 rounded bg-green-500/80" /> Validated
+            </span>
+            <span className="flex items-center gap-1.5">
+              <span className="h-3 w-3 rounded bg-yellow-500/80" /> Partial
+            </span>
+            <span className="flex items-center gap-1.5">
+              <span className="h-3 w-3 rounded bg-blue-500/60" /> In Progress
+            </span>
+            <span className="flex items-center gap-1.5">
+              <span className="h-3 w-3 rounded bg-red-500/70" /> Not Covered
+            </span>
+            <span className="flex items-center gap-1.5">
+              <span className="h-3 w-3 rounded bg-gray-700/50" /> Not Evaluated
+            </span>
+          </div>
+
+          {/* Heatmap grid — one column per tactic */}
+          <div className="overflow-x-auto">
+            <div className="inline-flex gap-2 min-w-max">
+              {allTactics.map((tactic) => {
+                const techs = techniquesByTactic[tactic] || [];
+                return (
+                  <div key={tactic} className="flex flex-col gap-1" style={{ minWidth: 120 }}>
+                    {/* Tactic header */}
+                    <div className="rounded bg-gray-800 px-2 py-1.5 text-center">
+                      <span className="text-[10px] font-semibold uppercase tracking-wide text-gray-400">
+                        {tactic.replace(/-/g, " ")}
+                      </span>
+                      <span className="ml-1 text-[10px] text-gray-600">({techs.length})</span>
+                    </div>
+
+                    {/* Technique cells */}
+                    {techs.map((tech) => (
+                      <button
+                        key={tech.technique_id}
+                        onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
+                        className={`rounded border p-1.5 text-left transition-all hover:opacity-80 ${statusCellColor(tech.status_global)}`}
+                        title={`${tech.mitre_id}: ${tech.name} (${statusLabel(tech.status_global)})`}
+                      >
+                        <span className="block truncate text-[10px] font-mono text-white/90">
+                          {tech.mitre_id}
+                        </span>
+                        <span className="block truncate text-[9px] text-white/60">
+                          {tech.name}
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── SECTION 5: Gap Analysis ────────────────────────────────── */}
+      {gaps && gaps.gaps.length > 0 && (
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+          <h2 className="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-gray-500">
+            <AlertTriangle className="h-4 w-4 text-orange-400" />
+            Coverage Gap Analysis ({gaps.total_gaps} gaps)
+          </h2>
+
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm">
+              <thead>
+                <tr className="border-b border-gray-800">
+                  <th className="pb-3 pr-4 font-medium text-gray-400">Technique</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Tactic</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Status</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Templates</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Tests</th>
+                </tr>
+              </thead>
+              <tbody>
+                {gaps.gaps.map((gap: GapItem) => (
+                  <tr
+                    key={gap.technique_id}
+                    className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors cursor-pointer"
+                    onClick={() => navigate(`/techniques/${gap.mitre_id}`)}
+                  >
+                    <td className="py-2.5 pr-4">
+                      <div className="flex items-center gap-2">
+                        <span className="font-mono text-xs text-cyan-400">{gap.mitre_id}</span>
+                        <span className="truncate text-gray-300 text-xs max-w-[200px]">
+                          {gap.name}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="py-2.5 px-4 text-xs text-gray-400">
+                      {gap.tactic || "-"}
+                    </td>
+                    <td className="py-2.5 px-4">
+                      <span className="flex items-center gap-1.5 text-xs">
+                        {statusIcon(gap.status_global)}
+                        {statusLabel(gap.status_global)}
+                      </span>
+                    </td>
+                    <td className="py-2.5 px-4">
+                      {gap.has_templates ? (
+                        <span className="inline-flex items-center gap-1 text-xs text-green-400">
+                          <BookOpen className="h-3.5 w-3.5" />
+                          {gap.available_templates}
+                        </span>
+                      ) : (
+                        <span className="text-xs text-gray-600">0</span>
+                      )}
+                    </td>
+                    <td className="py-2.5 px-4">
+                      {gap.existing_tests > 0 ? (
+                        <span className="inline-flex items-center gap-1 text-xs text-blue-400">
+                          <FlaskConical className="h-3.5 w-3.5" />
+                          {gap.existing_tests}
+                        </span>
+                      ) : (
+                        <span className="text-xs text-gray-600">0</span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* ── SECTION 6: All Techniques List ─────────────────────────── */}
+      {actor.techniques.length > 0 && (
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
+            All Techniques ({actor.techniques.length})
+          </h2>
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm">
+              <thead>
+                <tr className="border-b border-gray-800">
+                  <th className="pb-3 pr-4 font-medium text-gray-400">ID</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Name</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Tactic</th>
+                  <th className="pb-3 px-4 font-medium text-gray-400">Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {actor.techniques.map((tech: ThreatActorTechnique) => (
+                  <tr
+                    key={tech.technique_id}
+                    className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors cursor-pointer"
+                    onClick={() => navigate(`/techniques/${tech.mitre_id}`)}
+                  >
+                    <td className="py-2.5 pr-4 font-mono text-xs text-cyan-400">
+                      {tech.mitre_id}
+                    </td>
+                    <td className="py-2.5 px-4 text-xs text-gray-300 truncate max-w-[250px]">
+                      {tech.name}
+                    </td>
+                    <td className="py-2.5 px-4 text-xs text-gray-400">
+                      {tech.tactic || "-"}
+                    </td>
+                    <td className="py-2.5 px-4">
+                      <span className="flex items-center gap-1.5 text-xs">
+                        {statusIcon(tech.status_global)}
+                        {statusLabel(tech.status_global)}
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* ── References ─────────────────────────────────────────────── */}
+      {actor.references && actor.references.length > 0 && (
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+          <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500">
+            References
+          </h2>
+          <ul className="space-y-1.5">
+            {actor.references.map((ref, i) => (
+              <li key={i} className="text-xs">
+                {ref.url ? (
+                  <a
+                    href={ref.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-cyan-400 hover:text-cyan-300 hover:underline"
+                  >
+                    {ref.source || ref.url}
+                  </a>
+                ) : (
+                  <span className="text-gray-400">{ref.source}</span>
+                )}
+                {ref.description && (
+                  <span className="ml-2 text-gray-500">{ref.description}</span>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/ThreatActorsPage.tsx

@@ -0,0 +1,246 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import {
+  Loader2,
+  AlertCircle,
+  Search,
+  Users,
+  Shield,
+  ChevronLeft,
+  ChevronRight,
+  Globe,
+  Target,
+  Crosshair,
+} from "lucide-react";
+import {
+  getThreatActors,
+  type ThreatActorSummary,
+  type ListThreatActorsParams,
+} from "../api/threat-actors";
+
+/** Coverage colour based on percentage. */
+function coverageColor(pct: number) {
+  if (pct >= 80) return "text-green-400";
+  if (pct >= 50) return "text-yellow-400";
+  if (pct >= 20) return "text-orange-400";
+  return "text-red-400";
+}
+
+function coverageBg(pct: number) {
+  if (pct >= 80) return "bg-green-500";
+  if (pct >= 50) return "bg-yellow-500";
+  if (pct >= 20) return "bg-orange-500";
+  return "bg-red-500";
+}
+
+/** Motivation badge colour. */
+function motivationColor(m: string | null) {
+  switch (m?.toLowerCase()) {
+    case "espionage":
+      return "border-purple-500/30 bg-purple-900/50 text-purple-400";
+    case "financial":
+      return "border-yellow-500/30 bg-yellow-900/50 text-yellow-400";
+    case "destruction":
+      return "border-red-500/30 bg-red-900/50 text-red-400";
+    case "hacktivism":
+      return "border-cyan-500/30 bg-cyan-900/50 text-cyan-400";
+    default:
+      return "border-gray-600/30 bg-gray-800/50 text-gray-400";
+  }
+}
+
+export default function ThreatActorsPage() {
+  const navigate = useNavigate();
+  const [search, setSearch] = useState("");
+  const [motivation, setMotivation] = useState("");
+  const [page, setPage] = useState(0);
+  const limit = 24;
+
+  const params: ListThreatActorsParams = {
+    offset: page * limit,
+    limit,
+    ...(search ? { search } : {}),
+    ...(motivation ? { motivation } : {}),
+  };
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["threat-actors", params],
+    queryFn: () => getThreatActors(params),
+  });
+
+  const totalPages = data ? Math.ceil(data.total / limit) : 0;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-white flex items-center gap-2">
+          <Users className="h-7 w-7 text-purple-400" />
+          Threat Actors
+        </h1>
+        <p className="mt-1 text-sm text-gray-400">
+          APT groups and threat actor profiles from MITRE ATT&CK with coverage analysis
+        </p>
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-3">
+        {/* Search */}
+        <div className="relative flex-1 min-w-[200px] max-w-md">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
+          <input
+            type="text"
+            placeholder="Search actors, aliases..."
+            value={search}
+            onChange={(e) => { setSearch(e.target.value); setPage(0); }}
+            className="w-full rounded-lg border border-gray-700 bg-gray-800 py-2 pl-10 pr-4 text-sm text-gray-300 placeholder-gray-500 focus:border-cyan-500 focus:outline-none"
+          />
+        </div>
+
+        {/* Motivation filter */}
+        <select
+          value={motivation}
+          onChange={(e) => { setMotivation(e.target.value); setPage(0); }}
+          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-300 focus:border-cyan-500 focus:outline-none"
+        >
+          <option value="">All Motivations</option>
+          <option value="espionage">Espionage</option>
+          <option value="financial">Financial</option>
+          <option value="destruction">Destruction</option>
+          <option value="hacktivism">Hacktivism</option>
+        </select>
+      </div>
+
+      {/* Loading */}
+      {isLoading && (
+        <div className="flex items-center justify-center py-16">
+          <Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
+        </div>
+      )}
+
+      {/* Error */}
+      {error && (
+        <div className="rounded-xl border border-red-500/30 bg-red-900/20 p-6 text-center">
+          <AlertCircle className="mx-auto h-8 w-8 text-red-400" />
+          <p className="mt-2 text-sm text-red-400">
+            Failed to load threat actors: {(error as Error)?.message}
+          </p>
+        </div>
+      )}
+
+      {/* Grid */}
+      {data && data.items.length > 0 && (
+        <>
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {data.items.map((actor: ThreatActorSummary) => (
+              <button
+                key={actor.id}
+                onClick={() => navigate(`/threat-actors/${actor.id}`)}
+                className="group rounded-xl border border-gray-800 bg-gray-900 p-5 text-left transition-all hover:border-purple-500/40 hover:bg-gray-900/80"
+              >
+                {/* Name + ID */}
+                <div className="flex items-start justify-between">
+                  <div className="min-w-0">
+                    <h3 className="truncate text-base font-semibold text-gray-200 group-hover:text-white">
+                      {actor.name}
+                    </h3>
+                    {actor.mitre_id && (
+                      <span className="text-xs font-mono text-purple-400">{actor.mitre_id}</span>
+                    )}
+                  </div>
+                  <Crosshair className="h-5 w-5 shrink-0 text-gray-600 group-hover:text-purple-400 transition-colors" />
+                </div>
+
+                {/* Country + Motivation */}
+                <div className="mt-3 flex flex-wrap items-center gap-2">
+                  {actor.country && (
+                    <span className="inline-flex items-center gap-1 rounded-full border border-gray-700 bg-gray-800 px-2 py-0.5 text-[11px] text-gray-400">
+                      <Globe className="h-3 w-3" />
+                      {actor.country}
+                    </span>
+                  )}
+                  {actor.motivation && (
+                    <span className={`inline-flex rounded-full border px-2 py-0.5 text-[11px] font-medium ${motivationColor(actor.motivation)}`}>
+                      {actor.motivation}
+                    </span>
+                  )}
+                </div>
+
+                {/* Sectors */}
+                {actor.target_sectors && actor.target_sectors.length > 0 && (
+                  <div className="mt-2 flex items-center gap-1.5">
+                    <Target className="h-3 w-3 text-gray-600 shrink-0" />
+                    <span className="truncate text-[11px] text-gray-500">
+                      {actor.target_sectors.slice(0, 3).join(", ")}
+                      {actor.target_sectors.length > 3 && ` +${actor.target_sectors.length - 3}`}
+                    </span>
+                  </div>
+                )}
+
+                {/* Stats */}
+                <div className="mt-4 flex items-center justify-between border-t border-gray-800 pt-3">
+                  <div className="flex items-center gap-1.5 text-xs text-gray-400">
+                    <Shield className="h-3.5 w-3.5" />
+                    {actor.technique_count} techniques
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="h-1.5 w-16 overflow-hidden rounded-full bg-gray-800">
+                      <div
+                        className={`h-full rounded-full ${coverageBg(actor.coverage_pct)}`}
+                        style={{ width: `${Math.min(actor.coverage_pct, 100)}%` }}
+                      />
+                    </div>
+                    <span className={`text-xs font-medium ${coverageColor(actor.coverage_pct)}`}>
+                      {actor.coverage_pct}%
+                    </span>
+                  </div>
+                </div>
+              </button>
+            ))}
+          </div>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-gray-400">
+                Showing {page * limit + 1}–{Math.min((page + 1) * limit, data.total)} of{" "}
+                {data.total}
+              </span>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => setPage(Math.max(0, page - 1))}
+                  disabled={page === 0}
+                  className="rounded-lg border border-gray-700 bg-gray-800 p-2 text-gray-400 hover:text-white disabled:opacity-40"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </button>
+                <span className="text-sm text-gray-400">
+                  Page {page + 1} of {totalPages}
+                </span>
+                <button
+                  onClick={() => setPage(Math.min(totalPages - 1, page + 1))}
+                  disabled={page >= totalPages - 1}
+                  className="rounded-lg border border-gray-700 bg-gray-800 p-2 text-gray-400 hover:text-white disabled:opacity-40"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Empty */}
+      {data && data.items.length === 0 && (
+        <div className="rounded-xl border border-gray-800 bg-gray-900 p-12 text-center">
+          <Users className="mx-auto h-12 w-12 text-gray-600" />
+          <h3 className="mt-4 text-lg font-medium text-gray-300">No Threat Actors Found</h3>
+          <p className="mt-1 text-sm text-gray-500">
+            Import threat actors from MITRE CTI via the Data Sources panel.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}