feat(test-catalog): add template creation and lead-approval workflow

Leads get a Create Template button that adds directly to the catalog
(existing POST /test-templates). Operators (red_tech/blue_tech) get the
same button, but their proposal now lands in a new template_suggestions
review queue instead — a lead on their team can approve it as-is, edit
fields before approving, or discard it. Modeled on the existing
ProcedureSuggestion review workflow.

frontend/src/api/template-suggestions.ts

@@ -0,0 +1,38 @@
+import client from "./client";
+import type { TemplateSuggestion } from "../types/models";
+import type { CreateTemplatePayload } from "./test-templates";
+
+/** Propose a new test template. Lands in the review queue, not the live catalog. */
+export async function proposeTemplate(
+  payload: CreateTemplatePayload,
+): Promise<TemplateSuggestion> {
+  const { data } = await client.post<TemplateSuggestion>(
+    "/template-suggestions",
+    payload,
+  );
+  return data;
+}
+
+/** List pending template suggestions, scoped to the caller's team (admins see both). */
+export async function getTemplateSuggestions(): Promise<TemplateSuggestion[]> {
+  const { data } = await client.get<TemplateSuggestion[]>("/template-suggestions");
+  return data;
+}
+
+/** Approve a suggestion, optionally editing fields, creating the real template. */
+export async function approveTemplateSuggestion(
+  id: string,
+  overrides?: Partial<CreateTemplatePayload>,
+): Promise<TemplateSuggestion> {
+  const { data } = await client.post<TemplateSuggestion>(
+    `/template-suggestions/${id}/approve`,
+    overrides || {},
+  );
+  return data;
+}
+
+/** Discard a suggestion without creating a template. */
+export async function rejectTemplateSuggestion(id: string): Promise<TemplateSuggestion> {
+  const { data } = await client.post<TemplateSuggestion>(`/template-suggestions/${id}/reject`);
+  return data;
+}

frontend/src/components/CreateTemplateModal.tsx

@@ -0,0 +1,197 @@
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { X, Loader2 } from "lucide-react";
+import { createTemplate, type CreateTemplatePayload } from "../api/test-templates";
+import { proposeTemplate } from "../api/template-suggestions";
+import { useToast } from "./Toast";
+
+const SEVERITY_OPTIONS = ["low", "medium", "high", "critical"];
+const PLATFORM_OPTIONS = ["windows", "linux", "macos", "azure-ad", "office-365", "containers"];
+
+/** Leads create a template directly into the live catalog; operators
+ * (red_tech/blue_tech) propose one instead — it lands in the review
+ * queue for a lead on their team to approve (with optional edits) or
+ * discard, rather than going live immediately. */
+export default function CreateTemplateModal({
+  canCreateDirectly,
+  onClose,
+}: {
+  canCreateDirectly: boolean;
+  onClose: () => void;
+}) {
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+
+  const [form, setForm] = useState<CreateTemplatePayload>({
+    mitre_technique_id: "",
+    name: "",
+    description: "",
+    source: "custom",
+    attack_procedure: "",
+    expected_detection: "",
+    platform: "",
+    severity: "",
+  });
+
+  const set = (field: keyof CreateTemplatePayload, value: string) =>
+    setForm((f) => ({ ...f, [field]: value }));
+
+  const directMutation = useMutation({
+    mutationFn: () => createTemplate(form),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["test-templates"] });
+      queryClient.invalidateQueries({ queryKey: ["test-templates-count"] });
+      showToast("success", "Template created and added to the catalog");
+      onClose();
+    },
+    onError: () => showToast("error", "Failed to create template"),
+  });
+
+  const proposeMutation = useMutation({
+    mutationFn: () => proposeTemplate(form),
+    onSuccess: () => {
+      showToast("success", "Template proposed — a lead will review it before it's added to the catalog");
+      onClose();
+    },
+    onError: () => showToast("error", "Failed to propose template"),
+  });
+
+  const isPending = directMutation.isPending || proposeMutation.isPending;
+  const canSubmit = form.mitre_technique_id.trim() !== "" && form.name.trim() !== "";
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+    if (canCreateDirectly) {
+      directMutation.mutate();
+    } else {
+      proposeMutation.mutate();
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+      <div className="w-full max-w-2xl rounded-xl border border-gray-800 bg-gray-900 shadow-xl">
+        <div className="flex items-center justify-between border-b border-gray-800 px-6 py-4">
+          <h2 className="text-lg font-semibold text-white">
+            {canCreateDirectly ? "Create Test Template" : "Propose Test Template"}
+          </h2>
+          <button onClick={onClose} className="rounded-lg p-1 text-gray-400 hover:bg-gray-800 hover:text-white">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="max-h-[70vh] space-y-4 overflow-y-auto px-6 py-4">
+          {!canCreateDirectly && (
+            <p className="rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-3 py-2 text-xs text-cyan-300">
+              This will be submitted for review — a lead on your team must approve it before it appears in the catalog.
+            </p>
+          )}
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="mb-1 block text-xs font-medium text-gray-500">
+                MITRE Technique ID <span className="text-red-400">*</span>
+              </label>
+              <input
+                required
+                value={form.mitre_technique_id}
+                onChange={(e) => set("mitre_technique_id", e.target.value)}
+                placeholder="T1059.001"
+                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-xs font-medium text-gray-500">
+                Name <span className="text-red-400">*</span>
+              </label>
+              <input
+                required
+                value={form.name}
+                onChange={(e) => set("name", e.target.value)}
+                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="mb-1 block text-xs font-medium text-gray-500">Description</label>
+            <textarea
+              rows={2}
+              value={form.description || ""}
+              onChange={(e) => set("description", e.target.value)}
+              className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="mb-1 block text-xs font-medium text-gray-500">Platform</label>
+              <select
+                value={form.platform || ""}
+                onChange={(e) => set("platform", e.target.value)}
+                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
+              >
+                <option value="">Unspecified</option>
+                {PLATFORM_OPTIONS.map((p) => (
+                  <option key={p} value={p}>{p}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="mb-1 block text-xs font-medium text-gray-500">Severity</label>
+              <select
+                value={form.severity || ""}
+                onChange={(e) => set("severity", e.target.value)}
+                className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
+              >
+                <option value="">Unspecified</option>
+                {SEVERITY_OPTIONS.map((s) => (
+                  <option key={s} value={s}>{s}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          <div>
+            <label className="mb-1 block text-xs font-medium text-gray-500">Suggested Attack Procedure</label>
+            <textarea
+              rows={3}
+              value={form.attack_procedure || ""}
+              onChange={(e) => set("attack_procedure", e.target.value)}
+              className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 font-mono text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
+            />
+          </div>
+
+          <div>
+            <label className="mb-1 block text-xs font-medium text-gray-500">Expected Detection</label>
+            <textarea
+              rows={3}
+              value={form.expected_detection || ""}
+              onChange={(e) => set("expected_detection", e.target.value)}
+              className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 font-mono text-sm text-gray-200 focus:border-cyan-500 focus:outline-none"
+            />
+          </div>
+
+          <div className="flex justify-end gap-2 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-lg border border-gray-700 px-4 py-2 text-sm text-gray-400 hover:bg-gray-800"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={!canSubmit || isPending}
+              className="flex items-center gap-1.5 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50"
+            >
+              {isPending && <Loader2 className="h-4 w-4 animate-spin" />}
+              {canCreateDirectly ? "Create Template" : "Submit for Review"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/TestCatalogPage.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useSearchParams, useParams } from "react-router-dom";
 import {
   Loader2,
@@ -11,9 +11,19 @@ import {
   FlaskConical,
   X,
   AlertTriangle,
+  Plus,
+  ClipboardList,
+  CheckCircle,
+  XCircle,
 } from "lucide-react";
 import { getTemplates, getTemplateCount } from "../api/test-templates";
+import {
+  getTemplateSuggestions,
+  approveTemplateSuggestion,
+  rejectTemplateSuggestion,
+} from "../api/template-suggestions";
 import TestFromTemplateForm from "../components/TestFromTemplateForm";
+import CreateTemplateModal from "../components/CreateTemplateModal";
 import type { TestTemplateSummary } from "../types/models";
 import { useAuth } from "../context/AuthContext";
 
@@ -86,6 +96,14 @@ export default function TestCatalogPage() {
     user?.role === "red_lead" ||
     user?.role === "blue_lead";
 
+  // Leads create templates straight into the catalog; operators get the
+  // same button but their submission goes through lead review first.
+  const canCreateTemplateDirectly = user?.role === "red_lead" || user?.role === "blue_lead";
+  const canProposeTemplate = user?.role === "red_tech" || user?.role === "blue_tech";
+  const isReviewLead = user?.role === "red_lead" || user?.role === "blue_lead" || user?.role === "admin";
+
+  const [showCreateModal, setShowCreateModal] = useState(false);
+
   const [search, setSearch] = useState(searchParams.get("search") || "");
   const [source, setSource] = useState(searchParams.get("source") || "");
   const [platform, setPlatform] = useState(searchParams.get("platform") || "");
@@ -166,9 +184,20 @@ export default function TestCatalogPage() {
             Browse available test templates. Use a template to quickly create a security test.
           </p>
         </div>
-        <span className="rounded-full border border-gray-700 bg-gray-800 px-3 py-1 text-sm font-medium text-gray-300">
-          {totalCount} template{totalCount !== 1 ? "s" : ""} available
-        </span>
+        <div className="flex items-center gap-3">
+          <span className="rounded-full border border-gray-700 bg-gray-800 px-3 py-1 text-sm font-medium text-gray-300">
+            {totalCount} template{totalCount !== 1 ? "s" : ""} available
+          </span>
+          {(canCreateTemplateDirectly || canProposeTemplate) && (
+            <button
+              onClick={() => setShowCreateModal(true)}
+              className="flex items-center gap-1.5 rounded-lg bg-cyan-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-cyan-500 transition-colors"
+            >
+              <Plus className="h-4 w-4" />
+              {canCreateTemplateDirectly ? "Create Template" : "Propose Template"}
+            </button>
+          )}
+        </div>
       </div>
 
       {/* Filters bar */}
@@ -337,6 +366,12 @@ export default function TestCatalogPage() {
         </>
       )}
 
+      {/* ── Template suggestions for leads ────────────────────────────
+          GET /template-suggestions is already scoped server-side to the
+          caller's own team (red_lead sees only red, blue_lead only blue;
+          admin sees both), so no client-side filtering is needed here. */}
+      {isReviewLead && <TemplateSuggestionsPanel />}
+
       {/* Template instantiation modal */}
       {templateId && (
         <TestFromTemplateForm
@@ -344,6 +379,103 @@ export default function TestCatalogPage() {
           onClose={() => navigate("/test-catalog")}
         />
       )}
+
+      {/* Create/propose template modal */}
+      {showCreateModal && (
+        <CreateTemplateModal
+          canCreateDirectly={canCreateTemplateDirectly}
+          onClose={() => setShowCreateModal(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+// ── Template suggestions panel (leads only) ─────────────────────────
+
+function TemplateSuggestionsPanel() {
+  const queryClient = useQueryClient();
+
+  const { data: suggestions = [] } = useQuery({
+    queryKey: ["template-suggestions"],
+    queryFn: getTemplateSuggestions,
+  });
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ["template-suggestions"] });
+    queryClient.invalidateQueries({ queryKey: ["test-templates"] });
+    queryClient.invalidateQueries({ queryKey: ["test-templates-count"] });
+  };
+  const approveMutation = useMutation({
+    mutationFn: (id: string) => approveTemplateSuggestion(id),
+    onSuccess: invalidate,
+  });
+  const rejectMutation = useMutation({
+    mutationFn: rejectTemplateSuggestion,
+    onSuccess: invalidate,
+  });
+  const isBusy = approveMutation.isPending || rejectMutation.isPending;
+
+  if (suggestions.length === 0) return null;
+
+  return (
+    <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
+      <div className="mb-4 flex items-center gap-2">
+        <ClipboardList className="h-5 w-5 text-yellow-400" />
+        <h2 className="text-lg font-semibold text-white">Template Suggestions</h2>
+        <span className="rounded-full border border-gray-600 bg-gray-800 px-2 py-0.5 text-xs font-medium text-gray-300">
+          {suggestions.length}
+        </span>
+        <span className="text-xs text-gray-500">Proposed by operators, pending your review</span>
+      </div>
+      <div className="space-y-3">
+        {suggestions.map((s) => (
+          <div key={s.id} className="rounded-lg border border-gray-700 bg-gray-800/50 p-4">
+            <div className="flex items-center justify-between gap-2">
+              <p className="text-sm font-medium text-gray-200">{s.name}</p>
+              <span className="rounded-full border border-gray-600/30 bg-gray-800/50 px-2 py-0.5 text-xs text-gray-400">
+                {s.mitre_technique_id}
+              </span>
+            </div>
+            {s.submitter_name && (
+              <p className="mt-0.5 text-xs text-gray-500">Proposed by {s.submitter_name}</p>
+            )}
+            {s.description && <p className="mt-2 text-sm text-gray-400">{s.description}</p>}
+            {s.attack_procedure && (
+              <div className="mt-2">
+                <p className="text-xs font-medium uppercase text-gray-500">Suggested Attack Procedure</p>
+                <pre className="mt-1 whitespace-pre-wrap rounded bg-gray-900 p-2 font-mono text-xs text-gray-300">
+                  {s.attack_procedure}
+                </pre>
+              </div>
+            )}
+            {s.expected_detection && (
+              <div className="mt-2">
+                <p className="text-xs font-medium uppercase text-gray-500">Expected Detection</p>
+                <pre className="mt-1 whitespace-pre-wrap rounded bg-gray-900 p-2 font-mono text-xs text-gray-300">
+                  {s.expected_detection}
+                </pre>
+              </div>
+            )}
+            <div className="mt-3 flex gap-2">
+              <button
+                onClick={() => approveMutation.mutate(s.id)}
+                disabled={isBusy}
+                className="flex items-center gap-1 rounded-lg border border-green-500/30 bg-green-900/20 px-3 py-1.5 text-xs font-medium text-green-400 hover:bg-green-900/40 disabled:opacity-50"
+              >
+                <CheckCircle className="h-3.5 w-3.5" /> Approve
+              </button>
+              <button
+                onClick={() => rejectMutation.mutate(s.id)}
+                disabled={isBusy}
+                className="flex items-center gap-1 rounded-lg border border-red-500/30 bg-red-900/20 px-3 py-1.5 text-xs font-medium text-red-400 hover:bg-red-900/40 disabled:opacity-50"
+              >
+                <XCircle className="h-3.5 w-3.5" /> Discard
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

frontend/src/types/models.ts

@@ -256,6 +256,32 @@ export interface ProcedureSuggestion {
   template_current_text: string | null;
 }
 
+// ── Template suggestions (operator-proposed templates) ──────────────
+
+export interface TemplateSuggestion {
+  id: string;
+  mitre_technique_id: string;
+  name: string;
+  description: string | null;
+  source: string;
+  source_url: string | null;
+  attack_procedure: string | null;
+  expected_detection: string | null;
+  platform: string | null;
+  tool_suggested: string | null;
+  severity: string | null;
+  atomic_test_id: string | null;
+  suggested_remediation: string | null;
+  team: TeamSide;
+  submitted_by: string | null;
+  submitter_name: string | null;
+  status: "pending" | "approved" | "rejected";
+  reviewed_by: string | null;
+  reviewed_at: string | null;
+  created_template_id: string | null;
+  created_at: string | null;
+}
+
 export interface TestTemplateSummary {
   id: string;
   mitre_technique_id: string;