From 8974ec96d0c487c2e84e225f165cbd9ae4dc47f1 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Thu, 29 Jan 2026 01:20:09 +0000
Subject: Add Red Team fields to makima/frontend contract creation

- Add redTeamEnabled and redTeamPrompt state to contracts.tsx
- Add UI toggle checkbox for 'Enable Red Team monitoring'
- Add conditional textarea for 'Custom review criteria'
- Include red_team_enabled and red_team_prompt in CreateContractRequest
- Reset red team fields on form cancel/success
- Add redTeamEnabled to ContractSummary type in api.ts
- Add redTeamEnabled/redTeamPrompt to CreateContractRequest type
- Add red team badge to ContractList.tsx contract items

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 makima/frontend/src/routes/contracts.tsx | 66 ++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)

(limited to 'makima/frontend/src/routes')

diff --git a/makima/frontend/src/routes/contracts.tsx b/makima/frontend/src/routes/contracts.tsx
index aa62bd9..2f1f246 100644
--- a/makima/frontend/src/routes/contracts.tsx
+++ b/makima/frontend/src/routes/contracts.tsx
@@ -93,6 +93,8 @@ function ContractsPageContent() {
   const [contractTypes, setContractTypes] = useState<ContractTypeTemplate[]>([]);
   const [contractTypesLoading, setContractTypesLoading] = useState(false);
   const [localOnly, setLocalOnly] = useState(false);
+  const [redTeamEnabled, setRedTeamEnabled] = useState(false);
+  const [redTeamPrompt, setRedTeamPrompt] = useState("");
 
   // Fetch contract types when modal opens - merges built-in types with user templates
   useEffect(() => {
@@ -265,6 +267,8 @@ function ContractsPageContent() {
       contractType: contractType,
       initialPhase: initialPhase !== defaultPhaseForType ? initialPhase : undefined,
       localOnly: localOnly || undefined,
+      redTeamEnabled: redTeamEnabled || undefined,
+      redTeamPrompt: redTeamEnabled && redTeamPrompt.trim() ? redTeamPrompt.trim() : undefined,
     };
 
     try {
@@ -306,6 +310,8 @@ function ContractsPageContent() {
         setRepoUrl("");
         setRepoPath("");
         setLocalOnly(false);
+        setRedTeamEnabled(false);
+        setRedTeamPrompt("");
         navigate(`/contracts/${contract.id}`);
       }
     } catch (err) {
@@ -340,6 +346,8 @@ function ContractsPageContent() {
     setRepoUrl("");
     setRepoPath("");
     setLocalOnly(false);
+    setRedTeamEnabled(false);
+    setRedTeamPrompt("");
     setCreateError(null);
   }, []);
 
@@ -705,6 +713,64 @@ function ContractsPageContent() {
                   </p>
                 </div>
 
+                {/* Red Team Monitoring */}
+                <div className="space-y-2">
+                  <div className="flex items-center space-x-3">
+                    <button
+                      type="button"
+                      onClick={() => setRedTeamEnabled(!redTeamEnabled)}
+                      className={`w-5 h-5 flex items-center justify-center border transition-colors ${
+                        redTeamEnabled
+                          ? "bg-[#780f3c] border-[#fc75aa] text-[#ffdbe7]"
+                          : "bg-[#0d1b2d] border-[#3f6fb3] text-transparent"
+                      }`}
+                    >
+                      {redTeamEnabled && (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="3"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          className="w-3 h-3"
+                        >
+                          <polyline points="20 6 9 17 4 12" />
+                        </svg>
+                      )}
+                    </button>
+                    <label
+                      className="font-mono text-sm text-[#dbe7ff] cursor-pointer select-none"
+                      onClick={() => setRedTeamEnabled(!redTeamEnabled)}
+                    >
+                      Enable Red Team monitoring
+                    </label>
+                  </div>
+                  <p className="font-mono text-xs text-[#8b949e] pl-8">
+                    Spawns a parallel task that monitors work output for quality and compliance.
+                  </p>
+                </div>
+
+                {/* Red Team Prompt (shown when red team enabled) */}
+                {redTeamEnabled && (
+                  <div>
+                    <label className="block font-mono text-xs text-[#8b949e] uppercase mb-1">
+                      Custom review criteria (optional)
+                    </label>
+                    <textarea
+                      value={redTeamPrompt}
+                      onChange={(e) => setRedTeamPrompt(e.target.value)}
+                      placeholder="Enter custom criteria for the red team to evaluate against... (e.g., 'Ensure all functions have proper error handling', 'Verify security best practices are followed')"
+                      rows={3}
+                      className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#fc75aa] resize-none"
+                    />
+                    <p className="mt-1 font-mono text-xs text-[#8b949e]">
+                      Provide specific criteria for the red team to focus on during reviews.
+                    </p>
+                  </div>
+                )}
+
                 {/* Repository Configuration */}
                 <div className="border-t border-[rgba(117,170,252,0.2)] pt-4">
                   <label className="block font-mono text-xs text-[#75aafc] uppercase mb-3">
-- 
cgit v1.2.3