fix(course-settings): persist automation toggles to backend

Save Settings button on the per-course Settings tab popped a placeholder
alert. Now it loads + persists the two toggles (auto-grade on submit,
MCQ-only) via new GET/PUT /api/courses/:id/automation-settings, stored
in system_settings under course-scoped keys. UI shows inline success or
error feedback instead of an alert(). Field set is disabled while
loading/saving.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: WangYuTengg

src/client/features/staff-course/StaffCourseDetail.tsx

@@ -383,7 +383,7 @@ export function StaffCourseDetail({ courseId }: StaffCourseDetailProps) {
                   Configure course-level automatic grading behavior.
                 </p>
               </div>
-              <SettingsTab />
+              <SettingsTab courseId={courseId} />
             </div>
           )}
         </div>

src/client/features/staff-grading/components/SettingsTab.tsx

@@ -1,8 +1,58 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { apiClient } from '../../../lib/api';
 
-export function SettingsTab() {
+type AutomationSettings = {
+  autoGradeOnSubmit: boolean;
+  autoGradeMcqOnly: boolean;
+};
+
+type SettingsTabProps = {
+  courseId: string;
+};
+
+export function SettingsTab({ courseId }: SettingsTabProps) {
   const [autoGradeOnSubmit, setAutoGradeOnSubmit] = useState(false);
-  const [autoGradeMCQOnly, setAutoGradeMCQOnly] = useState(true);
+  const [autoGradeMcqOnly, setAutoGradeMcqOnly] = useState(true);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [feedback, setFeedback] = useState<{ kind: 'success' | 'error'; message: string } | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    apiClient<AutomationSettings>(`/api/courses/${courseId}/automation-settings`)
+      .then((data) => {
+        if (cancelled) return;
+        setAutoGradeOnSubmit(data.autoGradeOnSubmit);
+        setAutoGradeMcqOnly(data.autoGradeMcqOnly);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setFeedback({ kind: 'error', message: err instanceof Error ? err.message : 'Failed to load settings' });
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [courseId]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setFeedback(null);
+    try {
+      await apiClient<AutomationSettings>(`/api/courses/${courseId}/automation-settings`, {
+        method: 'PUT',
+        body: JSON.stringify({ autoGradeOnSubmit, autoGradeMcqOnly }),
+      });
+      setFeedback({ kind: 'success', message: 'Settings saved.' });
+    } catch (err) {
+      setFeedback({ kind: 'error', message: err instanceof Error ? err.message : 'Failed to save settings' });
+    } finally {
+      setSaving(false);
+    }
+  };
 
   return (
     <div className="space-y-6">
@@ -13,15 +63,15 @@ export function SettingsTab() {
           Configure automatic grading to run when submissions are received
         </p>
 
-        <div className="space-y-4">
+        <fieldset disabled={loading || saving} className="space-y-4">
           {/* Auto-grade on submit toggle */}
           <div className="flex items-start justify-between p-4 bg-gray-50 rounded-lg">
             <div className="flex-1">
               <label htmlFor="auto-grade-submit" className="font-medium text-gray-900 block mb-1">
                 Auto-grade on submission
               </label>
               <p className="text-sm text-gray-600">
-                Automatically grade MCQ questions when a student submits their assignment
+                Automatically grade questions when a student submits their assignment
               </p>
             </div>
             <label className="relative inline-flex items-center cursor-pointer ml-4">
@@ -50,25 +100,36 @@ export function SettingsTab() {
               <input
                 id="mcq-only"
                 type="checkbox"
-                checked={autoGradeMCQOnly}
-                onChange={(e) => setAutoGradeMCQOnly(e.target.checked)}
+                checked={autoGradeMcqOnly}
+                onChange={(e) => setAutoGradeMcqOnly(e.target.checked)}
                 className="sr-only peer"
               />
               <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
             </label>
           </div>
-        </div>
+        </fieldset>
+
+        {feedback && (
+          <div
+            role="status"
+            className={`mt-4 px-4 py-2 rounded-md text-sm ${
+              feedback.kind === 'success'
+                ? 'bg-green-50 border border-green-200 text-green-800'
+                : 'bg-red-50 border border-red-200 text-red-800'
+            }`}
+          >
+            {feedback.message}
+          </div>
+        )}
 
         <div className="mt-6 flex justify-end">
           <button
             type="button"
-            onClick={() => {
-              // TODO: Save settings to backend
-              alert('Settings saved! (This is a placeholder - functionality to be implemented)');
-            }}
-            className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition-colors"
+            onClick={handleSave}
+            disabled={loading || saving}
+            className="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 text-white font-medium py-2 px-6 rounded-lg transition-colors"
           >
-            Save Settings
+            {saving ? 'Saving…' : 'Save Settings'}
           </button>
         </div>
       </div>

src/server/routes/courses/automation-settings.ts

@@ -0,0 +1,116 @@
+import { Hono } from 'hono';
+import { z } from 'zod';
+import { eq, inArray } from 'drizzle-orm';
+import { db } from '../../../db/index.js';
+import { courses, systemSettings } from '../../../db/schema.js';
+import { authMiddleware, requireRole, type AuthContext } from '../../middleware/auth.js';
+import { HTTPException } from 'hono/http-exception';
+
+const automationSettingsRoute = new Hono<AuthContext>();
+
+const AUTO_GRADE_ON_SUBMIT_KEY = (id: string) => `course.${id}.auto_grade_on_submit`;
+const AUTO_GRADE_MCQ_ONLY_KEY = (id: string) => `course.${id}.auto_grade_mcq_only`;
+
+const updateSchema = z.object({
+  autoGradeOnSubmit: z.boolean(),
+  autoGradeMcqOnly: z.boolean(),
+});
+
+const parseBool = (value: string | undefined, fallback: boolean): boolean => {
+  if (value === 'true') return true;
+  if (value === 'false') return false;
+  return fallback;
+};
+
+/**
+ * GET /api/courses/:id/automation-settings
+ * Returns the course's auto-grading toggles. Defaults: off / mcq-only on.
+ */
+automationSettingsRoute.get(
+  '/:id/automation-settings',
+  authMiddleware,
+  requireRole('staff', 'admin'),
+  async (c) => {
+    const courseId = c.req.param('id');
+
+    const [course] = await db
+      .select({ id: courses.id })
+      .from(courses)
+      .where(eq(courses.id, courseId))
+      .limit(1);
+
+    if (!course) return c.json({ error: 'Course not found' }, 404);
+
+    const rows = await db
+      .select()
+      .from(systemSettings)
+      .where(
+        inArray(systemSettings.key, [
+          AUTO_GRADE_ON_SUBMIT_KEY(courseId),
+          AUTO_GRADE_MCQ_ONLY_KEY(courseId),
+        ])
+      );
+
+    const byKey = new Map(rows.map((r) => [r.key, r.value]));
+
+    return c.json({
+      autoGradeOnSubmit: parseBool(byKey.get(AUTO_GRADE_ON_SUBMIT_KEY(courseId)), false),
+      autoGradeMcqOnly: parseBool(byKey.get(AUTO_GRADE_MCQ_ONLY_KEY(courseId)), true),
+    });
+  }
+);
+
+/**
+ * PUT /api/courses/:id/automation-settings
+ */
+automationSettingsRoute.put(
+  '/:id/automation-settings',
+  authMiddleware,
+  requireRole('staff', 'admin'),
+  async (c) => {
+    const user = c.get('user')!;
+    const courseId = c.req.param('id');
+
+    const [course] = await db
+      .select({ id: courses.id })
+      .from(courses)
+      .where(eq(courses.id, courseId))
+      .limit(1);
+
+    if (!course) return c.json({ error: 'Course not found' }, 404);
+
+    const body = await c.req.json();
+    const parsed = updateSchema.safeParse(body);
+    if (!parsed.success) {
+      throw new HTTPException(400, { message: 'Invalid request', cause: parsed.error });
+    }
+
+    const { autoGradeOnSubmit, autoGradeMcqOnly } = parsed.data;
+    const now = new Date();
+
+    const upsert = async (key: string, value: string, description: string) => {
+      await db
+        .insert(systemSettings)
+        .values({ key, value, description, updatedBy: user.id })
+        .onConflictDoUpdate({
+          target: systemSettings.key,
+          set: { value, updatedAt: now, updatedBy: user.id },
+        });
+    };
+
+    await upsert(
+      AUTO_GRADE_ON_SUBMIT_KEY(courseId),
+      String(autoGradeOnSubmit),
+      'Per-course: auto-grade on submission'
+    );
+    await upsert(
+      AUTO_GRADE_MCQ_ONLY_KEY(courseId),
+      String(autoGradeMcqOnly),
+      'Per-course: auto-grade MCQ questions only'
+    );
+
+    return c.json({ success: true, autoGradeOnSubmit, autoGradeMcqOnly });
+  }
+);
+
+export default automationSettingsRoute;

src/server/routes/courses/index.ts

@@ -8,6 +8,7 @@ import listEnrollmentsRoute from './list-enrollments.js';
 import bulkEnrollRoute from './bulk-enroll.js';
 import removeEnrollmentRoute from './remove-enrollment.js';
 import exportGradesRoute from './export-grades.js';
+import automationSettingsRoute from './automation-settings.js';
 
 const courses = new Hono<AuthContext>();
 
@@ -19,5 +20,6 @@ courses.route('/', listEnrollmentsRoute);
 courses.route('/', bulkEnrollRoute);
 courses.route('/', removeEnrollmentRoute);
 courses.route('/', exportGradesRoute);
+courses.route('/', automationSettingsRoute);
 
 export default courses;