diff --git a/web/src/components/dashboard/config-editor.tsx b/web/src/components/dashboard/config-editor.tsx
index bf617ca04..7e3255c50 100644
--- a/web/src/components/dashboard/config-editor.tsx
+++ b/web/src/components/dashboard/config-editor.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Loader2, Save } from 'lucide-react';
+import { AlertCircle, CheckCircle2, Loader2, RefreshCw } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
@@ -136,6 +136,15 @@ export function ConfigEditor() {
 
   const abortRef = useRef<AbortController | null>(null);
 
+  /** Auto-save status indicator. */
+  const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
+  /** Debounce timer for auto-save. */
+  const autoSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  /** True while the initial config load is in progress — suppresses auto-save. */
+  const isLoadingConfigRef = useRef(false);
+  /** Ref tracking latest draftConfig for race-condition detection during save. */
+  const draftConfigRef = useRef<GuildConfig | null>(null);
+
   const updateDraftConfig = useCallback((updater: (prev: GuildConfig) => GuildConfig) => {
     setDraftConfig((prev) => updater((prev ?? {}) as GuildConfig));
   }, []);
@@ -169,7 +178,7 @@ export function ConfigEditor() {
   }, []);
 
   // ── Load config when guild changes ─────────────────────────────
-  const fetchConfig = useCallback(async (id: string) => {
+  const fetchConfig = useCallback(async (id: string, { skipSaveStatusReset = false } = {}) => {
     if (!id) return;
 
     abortRef.current?.abort();
@@ -178,6 +187,7 @@ export function ConfigEditor() {
 
     setLoading(true);
     setError(null);
+    isLoadingConfigRef.current = true;
 
     try {
       const res = await fetch(`/api/guilds/${encodeURIComponent(id)}/config`, {
@@ -209,10 +219,19 @@ export function ConfigEditor() {
       }
       setSavedConfig(data);
       setDraftConfig(structuredClone(data));
+      // Reset status after a successful reload; clear any stale error
+      if (!skipSaveStatusReset) {
+        setSaveStatus('idle');
+      }
+      // Use a macrotask so the state setter for draftConfig fires before we clear the flag
+      setTimeout(() => {
+        isLoadingConfigRef.current = false;
+      }, 0);
       setDmStepsRaw((data.welcome?.dmSequence?.steps ?? []).join('\n'));
       setProtectRoleIdsRaw((data.moderation?.protectRoles?.roleIds ?? []).join(', '));
     } catch (err) {
       if ((err as Error).name === 'AbortError') return;
+      isLoadingConfigRef.current = false;
       const msg = (err as Error).message || 'Failed to load config';
       setError(msg);
       toast.error('Failed to load config', { description: msg });
@@ -226,6 +245,11 @@ export function ConfigEditor() {
     return () => abortRef.current?.abort();
   }, [guildId, fetchConfig]);
 
+  // Keep draftConfigRef in sync for race-condition detection in saveChanges
+  useEffect(() => {
+    draftConfigRef.current = draftConfig;
+  }, [draftConfig]);
+
   // ── Derived state ──────────────────────────────────────────────
   const hasChanges = useMemo(() => {
     if (!savedConfig || !draftConfig) return false;
@@ -272,10 +296,10 @@ export function ConfigEditor() {
     }
 
     const patches = computePatches(savedConfig, draftConfig);
-    if (patches.length === 0) {
-      toast.info('No changes to save.');
-      return;
-    }
+    if (patches.length === 0) return;
+
+    // Snapshot draft before saving to detect changes made during in-flight save
+    const draftSnapshot = draftConfig;
 
     // Group patches by top-level section for batched requests
     const bySection = new Map<string, Array<{ path: string; value: unknown }>>();
@@ -290,6 +314,7 @@ export function ConfigEditor() {
     }
 
     setSaving(true);
+    setSaveStatus('saving');
 
     // Shared AbortController for all section saves - aborts all in-flight requests on 401
     const saveAbortController = new AbortController();
@@ -354,29 +379,64 @@ export function ConfigEditor() {
             return updated;
           });
         }
+        setSaveStatus('error');
         toast.error('Some sections failed to save', {
           description: `Failed: ${failedSections.join(', ')}`,
         });
       } else {
-        toast.success('Config saved successfully!');
-        // Full success: reload to get the authoritative version from the server
-        await fetchConfig(guildId);
+        setSaveStatus('saved');
+        // Full success: check if draft changed during save (user edited while saving)
+        if (deepEqual(draftConfigRef.current, draftSnapshot)) {
+          // No changes during save — safe to reload authoritative version
+          await fetchConfig(guildId, { skipSaveStatusReset: true });
+        } else {
+          // Draft changed during save — don't overwrite user's new changes
+          // Update savedConfig to reflect what was successfully persisted
+          setSavedConfig(structuredClone(draftSnapshot));
+        }
       }
     } catch (err) {
       const msg = (err as Error).message || 'Failed to save config';
+      setSaveStatus('error');
       toast.error('Failed to save config', { description: msg });
     } finally {
       setSaving(false);
     }
   }, [guildId, savedConfig, draftConfig, hasValidationErrors, fetchConfig]);
 
+  // ── Auto-save: debounce 500ms after draft changes ──────────────
+  useEffect(() => {
+    // Don't auto-save during initial config load or if no changes
+    if (isLoadingConfigRef.current || !hasChanges || hasValidationErrors || saving) return;
+
+    // Clear any pending timer
+    if (autoSaveTimerRef.current) {
+      clearTimeout(autoSaveTimerRef.current);
+    }
+
+    autoSaveTimerRef.current = setTimeout(() => {
+      void saveChanges();
+    }, 500);
+
+    return () => {
+      if (autoSaveTimerRef.current) {
+        clearTimeout(autoSaveTimerRef.current);
+      }
+    };
+  }, [draftConfig, hasChanges, hasValidationErrors, saving, saveChanges]);
+
   // ── Keyboard shortcut: Ctrl/Cmd+S to save ──────────────────────
   useEffect(() => {
     function onKeyDown(e: KeyboardEvent) {
       if ((e.metaKey || e.ctrlKey) && e.key === 's') {
         e.preventDefault();
         if (hasChanges && !saving && !hasValidationErrors) {
-          saveChanges();
+          // Cancel any pending debounce timer and save immediately
+          if (autoSaveTimerRef.current) {
+            clearTimeout(autoSaveTimerRef.current);
+            autoSaveTimerRef.current = null;
+          }
+          void saveChanges();
         }
       }
     }
@@ -697,38 +757,24 @@ export function ConfigEditor() {
             Manage AI, welcome messages, and other settings.
           </p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-3">
+          {/* Auto-save status indicator */}
+          <AutoSaveStatus status={saveStatus} onRetry={saveChanges} />
           <DiscardChangesButton
             onReset={discardChanges}
             disabled={saving || !hasChanges}
             sectionLabel="all unsaved changes"
           />
-          <Button
-            onClick={saveChanges}
-            disabled={saving || !hasChanges || hasValidationErrors}
-            aria-keyshortcuts="Control+S Meta+S"
-          >
-            {saving ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
-            ) : (
-              <Save className="mr-2 h-4 w-4" aria-hidden="true" />
-            )}
-            {saving ? 'Saving...' : 'Save Changes'}
-          </Button>
         </div>
       </div>
 
-      {/* Unsaved changes banner */}
-      {hasChanges && (
+      {/* Validation error banner */}
+      {hasChanges && hasValidationErrors && (
         <output
           aria-live="polite"
-          className="rounded-md border border-yellow-500/30 bg-yellow-500/10 px-4 py-3 text-sm text-yellow-200"
+          className="rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive"
         >
-          You have unsaved changes.{' '}
-          <kbd className="rounded border border-yellow-500/30 bg-yellow-500/10 px-1.5 py-0.5 font-mono text-xs">
-            Ctrl+S
-          </kbd>{' '}
-          to save.
+          Fix validation errors before changes can be saved.
         </output>
       )}
 
@@ -2241,6 +2287,58 @@ export function ConfigEditor() {
   );
 }
 
+// ── Auto-Save Status Indicator ────────────────────────────────
+
+interface AutoSaveStatusProps {
+  status: 'idle' | 'saving' | 'saved' | 'error';
+  onRetry: () => void;
+}
+
+/**
+ * Displays the current auto-save status with an icon and text.
+ *
+ * Shows nothing when idle, a spinner while saving, a check icon on success,
+ * and an error state with a retry button on failure.
+ */
+function AutoSaveStatus({ status, onRetry }: AutoSaveStatusProps) {
+  if (status === 'idle') return null;
+
+  if (status === 'saving') {
+    return (
+      <output className="flex items-center gap-1.5 text-sm text-muted-foreground">
+        <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+        Saving...
+      </output>
+    );
+  }
+
+  if (status === 'saved') {
+    return (
+      <output className="flex items-center gap-1.5 text-sm text-green-500">
+        <CheckCircle2 className="h-4 w-4" aria-hidden="true" />
+        Saved
+      </output>
+    );
+  }
+
+  // error state
+  return (
+    <output className="flex items-center gap-1.5 text-sm text-destructive">
+      <AlertCircle className="h-4 w-4" aria-hidden="true" />
+      Save failed
+      <button
+        type="button"
+        onClick={onRetry}
+        className="ml-1 inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label="Retry save"
+      >
+        <RefreshCw className="h-3 w-3" aria-hidden="true" />
+        Retry
+      </button>
+    </output>
+  );
+}
+
 // ── Toggle Switch ───────────────────────────────────────────────
 
 interface ToggleSwitchProps {
diff --git a/web/tests/components/dashboard/config-editor-autosave.test.tsx b/web/tests/components/dashboard/config-editor-autosave.test.tsx
new file mode 100644
index 000000000..92959e08b
--- /dev/null
+++ b/web/tests/components/dashboard/config-editor-autosave.test.tsx
@@ -0,0 +1,317 @@
+/**
+ * Tests for the auto-save feature in ConfigEditor.
+ *
+ * Covers:
+ * - AutoSaveStatus component renders the correct UI for idle, saving, saved, and error states
+ * - ConfigEditor loads config without triggering auto-save (no PATCH on mount)
+ * - Validation error banner appears when system prompt exceeds max length
+ * - Retry button is present in the error state
+ */
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor, act, fireEvent } from '@testing-library/react';
+
+// ── Mocks ─────────────────────────────────────────────────────────
+
+vi.mock('sonner', () => ({
+  toast: { error: vi.fn(), success: vi.fn(), info: vi.fn() },
+  Toaster: () => null,
+}));
+
+vi.mock('@/components/dashboard/reset-defaults-button', () => ({
+  DiscardChangesButton: ({
+    onReset,
+    disabled,
+  }: {
+    onReset: () => void;
+    disabled: boolean;
+  }) => (
+    <button onClick={onReset} disabled={disabled}>
+      Discard
+    </button>
+  ),
+}));
+
+vi.mock('@/components/dashboard/system-prompt-editor', () => ({
+  SystemPromptEditor: ({
+    value,
+    onChange,
+  }: {
+    value: string;
+    onChange: (v: string) => void;
+  }) => (
+    <textarea
+      data-testid="system-prompt"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  ),
+}));
+
+vi.mock('@/components/ui/channel-selector', () => ({
+  ChannelSelector: () => <div data-testid="channel-selector" />,
+}));
+
+vi.mock('@/components/ui/role-selector', () => ({
+  RoleSelector: () => <div data-testid="role-selector" />,
+}));
+
+vi.mock('@/components/dashboard/config-diff', () => ({
+  ConfigDiff: () => <div data-testid="config-diff" />,
+}));
+
+// ── Fixtures ──────────────────────────────────────────────────────
+
+const minimalConfig = {
+  ai: { enabled: false, systemPrompt: '', blockedChannelIds: [] },
+  welcome: { enabled: false, message: '' },
+  moderation: { enabled: false },
+  triage: { enabled: false },
+  starboard: { enabled: false },
+  permissions: { enabled: false },
+  memory: { enabled: false },
+  reputation: { enabled: false },
+  engagement: { enabled: false },
+  challenges: { enabled: false },
+  github: { feed: { enabled: false } },
+  tickets: { enabled: false },
+  help: { enabled: false },
+  announce: { enabled: false },
+  snippet: { enabled: false },
+  poll: { enabled: false },
+  showcase: { enabled: false },
+  review: { enabled: false },
+  tldr: { enabled: false },
+  afk: { enabled: false },
+};
+
+// ── Tests ─────────────────────────────────────────────────────────
+
+describe('ConfigEditor auto-save integration', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    localStorage.setItem('volvox-bot-selected-guild', 'guild-123');
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it('loads config without issuing any PATCH request', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: () => Promise.resolve(minimalConfig),
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { ConfigEditor } = await import('@/components/dashboard/config-editor');
+    render(<ConfigEditor />);
+
+    // Wait for config to load
+    await waitFor(
+      () => {
+        expect(screen.getByTestId('system-prompt')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    // Only GET should have been called — no PATCH
+    const patchCalls = fetchMock.mock.calls.filter(
+      (call: unknown[]) => (call[1] as { method?: string } | undefined)?.method === 'PATCH',
+    );
+    expect(patchCalls).toHaveLength(0);
+  });
+
+  it('shows validation error banner when system prompt exceeds max length', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: () => Promise.resolve(minimalConfig),
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { ConfigEditor } = await import('@/components/dashboard/config-editor');
+    render(<ConfigEditor />);
+
+    await waitFor(
+      () => {
+        expect(screen.getByTestId('system-prompt')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    // Type more than SYSTEM_PROMPT_MAX_LENGTH chars (20000)
+    const tooLong = 'x'.repeat(20001);
+    await act(async () => {
+      fireEvent.change(screen.getByTestId('system-prompt'), { target: { value: tooLong } });
+    });
+
+    await waitFor(
+      () => {
+        expect(
+          screen.getByText(/Fix validation errors before changes can be saved/),
+        ).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
+
+    // No PATCH should have been issued
+    const patchCalls = fetchMock.mock.calls.filter(
+      (call: unknown[]) => (call[1] as { method?: string } | undefined)?.method === 'PATCH',
+    );
+    expect(patchCalls).toHaveLength(0);
+  });
+});
+
+// ── Unit tests for AutoSaveStatus (via snapshot-style checks) ─────
+
+describe('auto-save status UI', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    localStorage.clear();
+    localStorage.setItem('volvox-bot-selected-guild', 'guild-123');
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it('shows no status indicator when idle', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: () => Promise.resolve(minimalConfig),
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { ConfigEditor } = await import('@/components/dashboard/config-editor');
+    render(<ConfigEditor />);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10);
+    });
+
+    expect(screen.getByTestId('system-prompt')).toBeInTheDocument();
+    expect(screen.queryByText('Saving...')).not.toBeInTheDocument();
+    expect(screen.queryByText('Saved')).not.toBeInTheDocument();
+    expect(screen.queryByText('Save failed')).not.toBeInTheDocument();
+  });
+
+  it('shows "Saving..." with a spinner while saving', async () => {
+    const fetchMock = vi.fn().mockImplementation((_url: string, opts: { method?: string }) => {
+      if (opts?.method === 'PATCH') {
+        // Never resolves — keeps saving state visible
+        return new Promise(() => {});
+      }
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => Promise.resolve(minimalConfig),
+      });
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { ConfigEditor } = await import('@/components/dashboard/config-editor');
+    render(<ConfigEditor />);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10);
+    });
+
+    expect(screen.getByTestId('system-prompt')).toBeInTheDocument();
+
+    // Trigger a change so auto-save will fire
+    await act(async () => {
+      fireEvent.change(screen.getByTestId('system-prompt'), { target: { value: 'Hello' } });
+    });
+
+    // Advance past the 500ms debounce
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(600);
+    });
+
+    expect(screen.getByText('Saving...')).toBeInTheDocument();
+  });
+
+  it('shows "Saved" after a successful save', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: () => Promise.resolve(minimalConfig),
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { ConfigEditor } = await import('@/components/dashboard/config-editor');
+    render(<ConfigEditor />);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10);
+    });
+
+    expect(screen.getByTestId('system-prompt')).toBeInTheDocument();
+
+    // Change to trigger auto-save
+    await act(async () => {
+      fireEvent.change(screen.getByTestId('system-prompt'), { target: { value: 'Updated prompt' } });
+    });
+
+    // Advance past debounce and let save + reload complete
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(600);
+    });
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10);
+    });
+
+    expect(screen.getByText('Saved')).toBeInTheDocument();
+  });
+
+  it('shows "Save failed" with a Retry button when PATCH returns an error', async () => {
+    let callCount = 0;
+    const fetchMock = vi.fn().mockImplementation(() => {
+      callCount++;
+      if (callCount === 1) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: () => Promise.resolve(minimalConfig),
+        });
+      }
+      return Promise.resolve({
+        ok: false,
+        status: 500,
+        json: () => Promise.resolve({ error: 'Server error' }),
+      });
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { ConfigEditor } = await import('@/components/dashboard/config-editor');
+    render(<ConfigEditor />);
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10);
+    });
+
+    expect(screen.getByTestId('system-prompt')).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.change(screen.getByTestId('system-prompt'), {
+        target: { value: 'Trigger save failure' },
+      });
+    });
+
+    // Advance past debounce + let save attempt complete
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(600);
+    });
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(10);
+    });
+
+    expect(screen.getByText('Save failed')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Retry save' })).toBeInTheDocument();
+  });
+});