feat(frontend): Add Phase Guard toggle to AutopilotPanelmakima/phaseguard-toggle

Added the phase_guard toggle to the AutopilotPanel component, which allows
users to enable/disable requiring confirmation before phase transitions.

Changes:
- Added phaseGuard and autonomousLoop fields to Contract interface in api.ts
- Added phaseGuard field to UpdateContractRequest in api.ts
- Added Phase Guard toggle UI in AutopilotPanel with similar styling to master
- Toggle shows an 'active' badge when enabled
- Connected toggle to contract update API

The toggle appears below the autopilot control buttons and allows users to
require confirmation before the supervisor advances to the next phase.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2 files changed, 58 insertions, 0 deletions

diff --git a/makima/frontend/src/components/contracts/AutopilotPanel.tsx b/makima/frontend/src/components/contracts/AutopilotPanel.tsx
index a8a8e2e..cf42e44 100644
--- a/makima/frontend/src/components/contracts/AutopilotPanel.tsx
+++ b/makima/frontend/src/components/contracts/AutopilotPanel.tsx
@@ -5,6 +5,7 @@ import {
   startSupervisor,
   stopSupervisor,
   resumeSupervisor,
+  updateContract,
   type SupervisorStatus,
 } from "../../lib/api";
 
@@ -111,6 +112,23 @@ export function AutopilotPanel({ contract, onUpdate }: AutopilotPanelProps) {
     }
   }, [contract.id, supervisorStatus.supervisorTaskId, onUpdate]);
 
+  const handlePhaseGuardChange = useCallback(async (enabled: boolean) => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      await updateContract(contract.id, {
+        phaseGuard: enabled,
+        version: contract.version,
+      });
+      onUpdate();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to update phase guard setting");
+    } finally {
+      setLoading(false);
+    }
+  }, [contract.id, contract.version, onUpdate]);
+
   // Don't show panel for task-type contracts (they don't have supervisors)
   if (contract.contractType === "task") {
     return null;
@@ -185,6 +203,38 @@ export function AutopilotPanel({ contract, onUpdate }: AutopilotPanelProps) {
         )}
       </div>
 
+      {/* Phase Guard Toggle */}
+      <div className="pt-3 border-t border-dashed border-[rgba(117,170,252,0.2)]">
+        <label className="flex items-start gap-3 cursor-pointer group">
+          <div className="relative mt-0.5">
+            <input
+              type="checkbox"
+              checked={contract.phaseGuard ?? false}
+              onChange={(e) => handlePhaseGuardChange(e.target.checked)}
+              disabled={loading}
+              className="sr-only peer"
+            />
+            <div className="w-9 h-5 bg-[rgba(117,170,252,0.1)] border border-[rgba(117,170,252,0.3)] rounded-full peer-checked:bg-[rgba(117,170,252,0.3)] transition-colors peer-disabled:opacity-50" />
+            <div className="absolute left-0.5 top-0.5 w-4 h-4 bg-[#555] rounded-full transition-transform peer-checked:translate-x-4 peer-checked:bg-[#75aafc] peer-disabled:opacity-50" />
+          </div>
+          <div className="flex-1">
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-sm text-[#dbe7ff] group-hover:text-white transition-colors">
+                Phase Guard
+              </span>
+              {contract.phaseGuard && (
+                <span className="px-1.5 py-0.5 text-[9px] font-mono uppercase bg-yellow-500/20 text-yellow-400 border border-yellow-400/30 rounded">
+                  active
+                </span>
+              )}
+            </div>
+            <div className="font-mono text-xs text-[#555] mt-0.5">
+              Ask for confirmation before advancing to the next phase
+            </div>
+          </div>
+        </label>
+      </div>
+
       {/* Show running indicator when active */}
       {supervisorStatus.status === "running" && (
         <div className="flex items-center gap-2 pt-2 border-t border-dashed border-[rgba(117,170,252,0.2)]">
diff --git a/makima/frontend/src/lib/api.ts b/makima/frontend/src/lib/api.ts
index 7760365..9b725bc 100644
--- a/makima/frontend/src/lib/api.ts
+++ b/makima/frontend/src/lib/api.ts
@@ -1478,6 +1478,10 @@ export interface Contract {
   status: ContractStatus;
   /** Supervisor task ID for contract orchestration */
   supervisorTaskId: string | null;
+  /** Whether tasks for this contract should run in autonomous loop mode */
+  autonomousLoop: boolean;
+  /** Whether to wait for user confirmation before progressing to the next phase */
+  phaseGuard: boolean;
   version: number;
   createdAt: string;
   updatedAt: string;
@@ -1518,6 +1522,10 @@ export interface UpdateContractRequest {
   description?: string;
   phase?: ContractPhase;
   status?: ContractStatus;
+  /** Enable or disable autonomous loop mode */
+  autonomousLoop?: boolean;
+  /** Enable or disable phase guard mode */
+  phaseGuard?: boolean;
   version?: number;
 }