feat(HAI-006): complete Step 4 — add groupOverlappingFiles toggle to Settings UI

packages/dashboard/app/components/SettingsModal.tsx

@@ -9,7 +9,7 @@ interface SettingsModalProps {
 }
 
 export function SettingsModal({ onClose, addToast }: SettingsModalProps) {
-  const [form, setForm] = useState<Settings>({ maxConcurrent: 2, maxWorktrees: 4, pollIntervalMs: 15000 });
+  const [form, setForm] = useState<Settings>({ maxConcurrent: 2, maxWorktrees: 4, pollIntervalMs: 15000, groupOverlappingFiles: false });
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -102,6 +102,20 @@ export function SettingsModal({ onClose, addToast }: SettingsModalProps) {
                 }
               />
             </div>
+            <div className="form-group">
+              <label htmlFor="groupOverlappingFiles" style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                <input
+                  id="groupOverlappingFiles"
+                  type="checkbox"
+                  checked={form.groupOverlappingFiles}
+                  onChange={(e) =>
+                    setForm((f) => ({ ...f, groupOverlappingFiles: e.target.checked }))
+                  }
+                />
+                Serialize tasks with overlapping files
+              </label>
+              <small>When enabled, tasks that modify the same files are queued serially to avoid merge conflicts</small>
+            </div>
           </div>
         )}
         <div className="modal-actions">