Implement per-system AI flags

drb-frontend/app/systems/page.tsx

@@ -433,6 +433,97 @@ function SystemForm({
   );
 }
 
+// ── Per-system AI flags panel ─────────────────────────────────────────────────
+
+interface SystemAiFlags {
+  stt_enabled?: boolean;
+  correlation_enabled?: boolean;
+}
+
+function AiFlagsPanel({ systemId, initial }: { systemId: string; initial: SystemAiFlags }) {
+  const [flags, setFlags] = useState<SystemAiFlags>(initial);
+  const [saving, setSaving] = useState<string | null>(null);
+  const [open, setOpen] = useState(false);
+
+  async function handleToggle(key: keyof SystemAiFlags, value: boolean) {
+    setSaving(key);
+    try {
+      const result = await c2api.setSystemAiFlags(systemId, { [key]: value });
+      setFlags(result.ai_flags as SystemAiFlags);
+    } finally {
+      setSaving(null);
+    }
+  }
+
+  async function handleClear(key: keyof SystemAiFlags) {
+    setSaving(key);
+    try {
+      const result = await c2api.setSystemAiFlags(systemId, { [key]: null });
+      setFlags(result.ai_flags as SystemAiFlags);
+    } finally {
+      setSaving(null);
+    }
+  }
+
+  const rows: { key: keyof SystemAiFlags; label: string }[] = [
+    { key: "stt_enabled",        label: "Speech-to-Text" },
+    { key: "correlation_enabled", label: "Incident Correlation" },
+  ];
+
+  return (
+    <div className="mt-3 border-t border-gray-800 pt-3">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="text-xs text-gray-500 hover:text-gray-300 font-mono transition-colors flex items-center gap-1"
+      >
+        <span>{open ? "▲" : "▼"}</span>
+        <span>AI Flags</span>
+        {(flags.stt_enabled === false || flags.correlation_enabled === false) && (
+          <span className="ml-1.5 text-yellow-600 font-bold">!</span>
+        )}
+      </button>
+
+      {open && (
+        <div className="mt-3 space-y-2 font-mono text-xs">
+          {rows.map(({ key, label }) => {
+            const override = flags[key];
+            const isSet   = override !== undefined;
+            const isOn    = override !== false;
+            return (
+              <div key={key} className="flex items-center gap-3">
+                <button
+                  onClick={() => handleToggle(key, !isOn)}
+                  disabled={saving === key}
+                  className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors disabled:opacity-50 ${
+                    isOn ? "bg-indigo-600" : "bg-gray-700"
+                  }`}
+                >
+                  <span className={`inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform ${isOn ? "translate-x-4" : "translate-x-0.5"}`} />
+                </button>
+                <span className="text-gray-300 flex-1">{label}</span>
+                {isSet ? (
+                  <button
+                    onClick={() => handleClear(key)}
+                    disabled={saving === key}
+                    className="text-gray-600 hover:text-gray-400 transition-colors"
+                    title="Clear override (inherit global)"
+                  >
+                    reset
+                  </button>
+                ) : (
+                  <span className="text-gray-700">inherits global</span>
+                )}
+              </div>
+            );
+          })}
+          <p className="text-gray-700 pt-1">Overrides apply on top of global AI flags. "reset" restores global default.</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+
 // ── Vocabulary panel ──────────────────────────────────────────────────────────
 
 function VocabularyPanel({ systemId }: { systemId: string }) {
@@ -692,6 +783,7 @@ export default function SystemsPage() {
                     Delete
                   </button>
                 </div>
+                <AiFlagsPanel systemId={s.system_id} initial={(s as unknown as { ai_flags?: SystemAiFlags }).ai_flags ?? {}} />
                 <VocabularyPanel systemId={s.system_id} />
               </div>
             );