diff --git a/web/next-env.d.ts b/web/next-env.d.ts
index c4b7818fb..9edff1c7c 100644
--- a/web/next-env.d.ts
+++ b/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/web/src/components/dashboard/config-editor.tsx b/web/src/components/dashboard/config-editor.tsx
index 0bc26c6f3..1708bca10 100644
--- a/web/src/components/dashboard/config-editor.tsx
+++ b/web/src/components/dashboard/config-editor.tsx
@@ -5,35 +5,37 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { ChannelSelector } from '@/components/ui/channel-selector';
-import { Input } from '@/components/ui/input';
-import { RoleSelector } from '@/components/ui/role-selector';
+import { updateNestedField, updateSectionEnabled, updateSectionField } from '@/lib/config-updates';
+import { computePatches, deepEqual, type GuildConfig } from '@/lib/config-utils';
 import { GUILD_SELECTED_EVENT, SELECTED_GUILD_KEY } from '@/lib/guild-selection';
-import type { BotConfig, DeepPartial } from '@/types/config';
 import { SYSTEM_PROMPT_MAX_LENGTH } from '@/types/config';
 import { ConfigDiff } from './config-diff';
 import { ConfigDiffModal } from './config-diff-modal';
+import {
+  AiAutoModSection,
+  AiSection,
+  ChallengesSection,
+  CommunityFeaturesSection,
+  EngagementSection,
+  GitHubSection,
+  MemorySection,
+  ModerationSection,
+  PermissionsSection,
+  ReputationSection,
+  StarboardSection,
+  TicketsSection,
+  TriageSection,
+  WelcomeSection,
+} from './config-sections';
 import { DiscardChangesButton } from './reset-defaults-button';
-import { SystemPromptEditor } from './system-prompt-editor';
-
-/** Config sections exposed by the API — all fields optional for partial API responses. */
-type GuildConfig = DeepPartial<BotConfig>;
-
-/** Shared input styling for text inputs and textareas in the config editor. */
-const inputClasses =
-  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
 
 /**
  * Generate a UUID with fallback for environments without crypto.randomUUID.
- *
- * @returns A UUID v4 string.
  */
 function generateId(): string {
-  // Use crypto.randomUUID if available
   if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
     return crypto.randomUUID();
   }
-  // Fallback: generate a UUID-like string
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
     const r = (Math.random() * 16) | 0;
     const v = c === 'x' ? r : (r & 0x3) | 0x8;
@@ -41,36 +43,8 @@ function generateId(): string {
   });
 }
 
-const DEFAULT_ACTIVITY_BADGES = [
-  { days: 90, label: '👑 Legend' },
-  { days: 30, label: '🌳 Veteran' },
-  { days: 7, label: '🌿 Regular' },
-  { days: 0, label: '🌱 Newcomer' },
-] as const;
-
-/**
- * Parse a numeric text input into a number, applying optional minimum/maximum bounds.
- *
- * @param raw - The input string to parse; an empty string yields `undefined`.
- * @param min - Optional lower bound; if the parsed value is less than `min`, `min` is returned.
- * @param max - Optional upper bound; if the parsed value is greater than `max`, `max` is returned.
- * @returns `undefined` if `raw` is empty or cannot be parsed as a finite number, otherwise the parsed number (clamped to `min`/`max` when provided).
- */
-function parseNumberInput(raw: string, min?: number, max?: number): number | undefined {
-  if (raw === '') return undefined;
-  const num = Number(raw);
-  if (!Number.isFinite(num)) return undefined;
-  if (min !== undefined && num < min) return min;
-  if (max !== undefined && num > max) return max;
-  return num;
-}
-
 /**
  * Type guard that checks whether a value is a guild configuration object returned by the API.
- *
- * @returns `true` if the value is an object containing at least one known top-level section
- *   (`ai`, `welcome`, `spam`, `moderation`, `triage`, `starboard`, `permissions`, `memory`) and each present section is a plain object
- *   (not an array or null). Returns `false` otherwise.
  */
 function isGuildConfig(data: unknown): data is GuildConfig {
   if (typeof data !== 'object' || data === null || Array.isArray(data)) return false;
@@ -97,6 +71,7 @@ function isGuildConfig(data: unknown): data is GuildConfig {
     'review',
     'challenges',
     'tickets',
+    'aiAutoMod',
   ] as const;
   const hasKnownSection = knownSections.some((key) => key in obj);
   if (!hasKnownSection) return false;
@@ -116,9 +91,7 @@ function isGuildConfig(data: unknown): data is GuildConfig {
  *
  * Loads the authoritative config for the selected guild, maintains a mutable draft for user edits,
  * computes and applies per-section patches to persist changes, and provides controls to save,
- * discard, and validate edits (including an unsaved-changes warning and keyboard shortcut).
- *
- * @returns The editor UI as JSX when a guild is selected and a draft config exists; `null` otherwise.
+ * discard, and validate edits.
  */
 export function ConfigEditor() {
   const [guildId, setGuildId] = useState<string>('');
@@ -138,6 +111,7 @@ export function ConfigEditor() {
 
   /** Raw textarea strings — kept separate so partial input isn't stripped on every keystroke. */
   const [dmStepsRaw, setDmStepsRaw] = useState('');
+  const [protectRoleIdsRaw, setProtectRoleIdsRaw] = useState('');
 
   const abortRef = useRef<AbortController | null>(null);
 
@@ -215,6 +189,7 @@ export function ConfigEditor() {
       setSavedConfig(data);
       setDraftConfig(structuredClone(data));
       setDmStepsRaw((data.welcome?.dmSequence?.steps ?? []).join('\n'));
+      setProtectRoleIdsRaw((data.moderation?.protectRoles?.roleIds ?? []).join(', '));
     } catch (err) {
       if ((err as Error).name === 'AbortError') return;
       const msg = (err as Error).message || 'Failed to load config';
@@ -236,8 +211,6 @@ export function ConfigEditor() {
     return !deepEqual(savedConfig, draftConfig);
   }, [savedConfig, draftConfig]);
 
-  // Check for validation errors before allowing save.
-  // Currently only validates system prompt length; extend with additional checks as needed.
   const hasValidationErrors = useMemo(() => {
     if (!draftConfig) return false;
     // Role menu validation: all options must have non-empty label and roleId
@@ -257,6 +230,7 @@ export function ConfigEditor() {
     const patches = computePatches(savedConfig, draftConfig);
     return [...new Set(patches.map((p) => p.path.split('.')[0]))];
   }, [savedConfig, draftConfig]);
+
   // ── Warn on unsaved changes before navigation ──────────────────
   useEffect(() => {
     if (!hasChanges) return;
@@ -270,7 +244,6 @@ export function ConfigEditor() {
     return () => window.removeEventListener('beforeunload', onBeforeUnload);
   }, [hasChanges]);
 
-  // ── Save changes (batched: parallel PATCH per section) ─────────
   // ── Open diff modal before saving ─────────────────────────────
   const openDiffModal = useCallback(() => {
     if (!guildId || !savedConfig || !draftConfig) return;
@@ -302,6 +275,9 @@ export function ConfigEditor() {
       if (section === 'welcome') {
         setDmStepsRaw((savedConfig.welcome?.dmSequence?.steps ?? []).join('\n'));
       }
+      if (section === 'moderation') {
+        setProtectRoleIdsRaw((savedConfig.moderation?.protectRoles?.roleIds ?? []).join(', '));
+      }
       toast.success(`Reverted ${section} changes.`);
     },
     [savedConfig],
@@ -339,7 +315,6 @@ export function ConfigEditor() {
 
     setSaving(true);
 
-    // Shared AbortController for all section saves - aborts all in-flight requests on 401
     const saveAbortController = new AbortController();
     const { signal } = saveAbortController;
 
@@ -356,7 +331,6 @@ export function ConfigEditor() {
         });
 
         if (res.status === 401) {
-          // Abort all other in-flight requests before redirecting
           saveAbortController.abort();
           window.location.href = '/login';
           throw new Error('Unauthorized');
@@ -384,8 +358,6 @@ export function ConfigEditor() {
       const hasFailures = results.some((r) => r.status === 'rejected');
 
       if (hasFailures) {
-        // Partial failure: merge only succeeded sections into savedConfig so
-        // the user can retry failed sections without losing their unsaved edits.
         const succeededSections = Array.from(bySection.keys()).filter(
           (s) => !failedSections.includes(s),
         );
@@ -408,9 +380,7 @@ export function ConfigEditor() {
       } else {
         toast.success('Config saved successfully!');
         setShowDiffModal(false);
-        // Store previous config for undo (1 level deep; scoped to current guild)
         setPrevSavedConfig({ guildId, config: structuredClone(savedConfig) as GuildConfig });
-        // Full success: reload to get the authoritative version from the server
         await fetchConfig(guildId);
       }
     } catch (err) {
@@ -421,21 +391,24 @@ export function ConfigEditor() {
     }
   }, [guildId, savedConfig, draftConfig, hasValidationErrors, fetchConfig]);
 
-  // Clear undo snapshot when guild changes to prevent cross-guild config corruption
+  // Clear undo snapshot when guild changes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: guildId IS necessary - effect must re-run when guild changes
   useEffect(() => {
     setPrevSavedConfig(null);
-  }, []);
+  }, [guildId]);
 
   // ── Undo last save ─────────────────────────────────────────────
   const undoLastSave = useCallback(() => {
     if (!prevSavedConfig) return;
-    // Guard: discard snapshot if guild changed since save
     if (prevSavedConfig.guildId !== guildId) {
       setPrevSavedConfig(null);
       return;
     }
     setDraftConfig(structuredClone(prevSavedConfig.config));
     setDmStepsRaw((prevSavedConfig.config.welcome?.dmSequence?.steps ?? []).join('\n'));
+    setProtectRoleIdsRaw(
+      (prevSavedConfig.config.moderation?.protectRoles?.roleIds ?? []).join(', '),
+    );
     setPrevSavedConfig(null);
     toast.info('Reverted to previous saved state. Save again to apply.');
   }, [prevSavedConfig, guildId]);
@@ -459,271 +432,35 @@ export function ConfigEditor() {
     if (!savedConfig) return;
     setDraftConfig(structuredClone(savedConfig));
     setDmStepsRaw((savedConfig.welcome?.dmSequence?.steps ?? []).join('\n'));
+    setProtectRoleIdsRaw((savedConfig.moderation?.protectRoles?.roleIds ?? []).join(', '));
     toast.success('Changes discarded.');
   }, [savedConfig]);
 
-  // ── Draft updaters ─────────────────────────────────────────────
-  const updateSystemPrompt = useCallback(
-    (value: string) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return { ...prev, ai: { ...prev.ai, systemPrompt: value } } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateAiEnabled = useCallback(
-    (enabled: boolean) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return { ...prev, ai: { ...prev.ai, enabled } } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateAiBlockedChannels = useCallback(
-    (channels: string[]) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return { ...prev, ai: { ...prev.ai, blockedChannelIds: channels } } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateWelcomeEnabled = useCallback(
-    (enabled: boolean) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return { ...prev, welcome: { ...prev.welcome, enabled } } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateWelcomeMessage = useCallback(
-    (message: string) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return { ...prev, welcome: { ...prev.welcome, message } } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateWelcomeField = useCallback(
-    (field: string, value: unknown) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return { ...prev, welcome: { ...(prev.welcome ?? {}), [field]: value } } as GuildConfig;
-      });
-    },
+  // ── Section update handlers ────────────────────────────────────
+  const createSectionUpdater = useCallback(
+    <K extends keyof GuildConfig>(section: K) => ({
+      setEnabled: (enabled: boolean) => {
+        updateDraftConfig((prev) => updateSectionEnabled(prev, section, enabled));
+      },
+      setField: (field: string, value: unknown) => {
+        updateDraftConfig((prev) => updateSectionField(prev, section, field, value));
+      },
+      setNestedField: (nestedKey: string, field: string, value: unknown) => {
+        updateDraftConfig((prev) => updateNestedField(prev, section, nestedKey, field, value));
+      },
+    }),
     [updateDraftConfig],
   );
 
-  const updateWelcomeRoleMenu = useCallback(
-    (field: string, value: unknown) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return {
-          ...prev,
-          welcome: {
-            ...(prev.welcome ?? {}),
-            roleMenu: { ...(prev.welcome?.roleMenu ?? {}), [field]: value },
-          },
-        } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateWelcomeDmSequence = useCallback(
-    (field: string, value: unknown) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return {
-          ...prev,
-          welcome: {
-            ...(prev.welcome ?? {}),
-            dmSequence: { ...(prev.welcome?.dmSequence ?? {}), [field]: value },
-          },
-        } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateModerationEnabled = useCallback(
-    (enabled: boolean) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return { ...prev, moderation: { ...prev.moderation, enabled } } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateModerationField = useCallback(
-    (field: string, value: unknown) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return { ...prev, moderation: { ...prev.moderation, [field]: value } } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateModerationDmNotification = useCallback(
-    (action: string, value: boolean) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return {
-          ...prev,
-          moderation: {
-            ...prev.moderation,
-            dmNotifications: { ...prev.moderation?.dmNotifications, [action]: value },
-          },
-        } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateModerationEscalation = useCallback(
-    (enabled: boolean) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return {
-          ...prev,
-          moderation: {
-            ...prev.moderation,
-            escalation: { ...prev.moderation?.escalation, enabled },
-          },
-        } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateAiAutoModField = useCallback(
-    (field: string, value: unknown) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return {
-          ...prev,
-          aiAutoMod: { ...prev.aiAutoMod, [field]: value },
-        } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateTriageEnabled = useCallback(
-    (enabled: boolean) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return { ...prev, triage: { ...prev.triage, enabled } } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateTriageField = useCallback(
-    (field: string, value: unknown) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return { ...prev, triage: { ...prev.triage, [field]: value } } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateStarboardField = useCallback(
-    (field: string, value: unknown) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return { ...prev, starboard: { ...prev.starboard, [field]: value } } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateRateLimitField = useCallback(
-    (field: string, value: unknown) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return {
-          ...prev,
-          moderation: {
-            ...prev.moderation,
-            rateLimit: { ...prev.moderation?.rateLimit, [field]: value },
-          },
-        } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateLinkFilterField = useCallback(
-    (field: string, value: unknown) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return {
-          ...prev,
-          moderation: {
-            ...prev.moderation,
-            linkFilter: { ...prev.moderation?.linkFilter, [field]: value },
-          },
-        } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateProtectRolesField = useCallback(
-    (field: string, value: unknown) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        const existingProtectRoles = prev.moderation?.protectRoles ?? {
-          enabled: true,
-          includeAdmins: true,
-          includeModerators: true,
-          includeServerOwner: true,
-          roleIds: [],
-        };
-        return {
-          ...prev,
-          moderation: {
-            ...prev.moderation,
-            protectRoles: { ...existingProtectRoles, [field]: value },
-          },
-        } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updatePermissionsField = useCallback(
-    (field: string, value: unknown) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return { ...prev, permissions: { ...prev.permissions, [field]: value } } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
-
-  const updateMemoryField = useCallback(
-    (field: string, value: unknown) => {
-      updateDraftConfig((prev) => {
-        if (!prev) return prev;
-        return { ...prev, memory: { ...prev.memory, [field]: value } } as GuildConfig;
-      });
-    },
-    [updateDraftConfig],
-  );
+  const aiUpdater = createSectionUpdater('ai');
+  const welcomeUpdater = createSectionUpdater('welcome');
+  const moderationUpdater = createSectionUpdater('moderation');
+  const triageUpdater = createSectionUpdater('triage');
+  const starboardUpdater = createSectionUpdater('starboard');
+  const permissionsUpdater = createSectionUpdater('permissions');
+  const memoryUpdater = createSectionUpdater('memory');
+  const reputationUpdater = createSectionUpdater('reputation');
+  const challengesUpdater = createSectionUpdater('challenges');
 
   // ── No guild selected ──────────────────────────────────────────
   if (!guildId) {
@@ -780,7 +517,6 @@ export function ConfigEditor() {
           </p>
         </div>
         <div className="flex items-center gap-2">
-          {/* Undo last save — visible only after a successful save with no new changes */}
           {prevSavedConfig && !hasChanges && (
             <Button
               variant="outline"
@@ -798,7 +534,6 @@ export function ConfigEditor() {
             disabled={saving || !hasChanges}
             sectionLabel="all unsaved changes"
           />
-          {/* Save button with unsaved-changes indicator dot */}
           <div className="relative">
             <Button
               onClick={openDiffModal}
@@ -837,1651 +572,181 @@ export function ConfigEditor() {
         </output>
       )}
 
-      {/* AI section */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle className="text-base">AI Chat</CardTitle>
-              <CardDescription>Configure the AI assistant behavior.</CardDescription>
-            </div>
-            <ToggleSwitch
-              checked={draftConfig.ai?.enabled ?? false}
-              onChange={updateAiEnabled}
-              disabled={saving}
-              label="AI Chat"
-            />
-          </div>
-        </CardHeader>
-      </Card>
-
-      {/* System Prompt */}
-      <SystemPromptEditor
-        value={draftConfig.ai?.systemPrompt ?? ''}
-        onChange={updateSystemPrompt}
-        disabled={saving}
-        maxLength={SYSTEM_PROMPT_MAX_LENGTH}
+      {/* AI Section */}
+      <AiSection
+        draftConfig={draftConfig}
+        guildId={guildId}
+        saving={saving}
+        onEnabledChange={aiUpdater.setEnabled}
+        onSystemPromptChange={(value) => aiUpdater.setField('systemPrompt', value)}
+        onBlockedChannelsChange={(channels) => aiUpdater.setField('blockedChannelIds', channels)}
       />
 
-      {/* AI Blocked Channels */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Blocked Channels</CardTitle>
-          <CardDescription>
-            The AI will not respond in these channels (or their threads).
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-2">
-          {guildId ? (
-            <ChannelSelector
-              id="ai-blocked-channels"
-              guildId={guildId}
-              selected={(draftConfig.ai?.blockedChannelIds ?? []) as string[]}
-              onChange={updateAiBlockedChannels}
-              placeholder="Select channels to block AI in..."
-              disabled={saving}
-              filter="text"
-            />
-          ) : (
-            <p className="text-muted-foreground text-sm">Select a server first</p>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Welcome section */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle className="text-base">Welcome Messages</CardTitle>
-              <CardDescription>Greet new members when they join the server.</CardDescription>
-            </div>
-            <ToggleSwitch
-              checked={draftConfig.welcome?.enabled ?? false}
-              onChange={updateWelcomeEnabled}
-              disabled={saving}
-              label="Welcome Messages"
-            />
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <label htmlFor="welcome-message" className="space-y-2">
-            <span className="text-sm font-medium">Welcome Message</span>
-            <textarea
-              id="welcome-message"
-              value={draftConfig.welcome?.message ?? ''}
-              onChange={(e) => updateWelcomeMessage(e.target.value)}
-              rows={4}
-              disabled={saving}
-              className={inputClasses}
-              placeholder="Welcome message template..."
-              aria-describedby="welcome-message-hint"
-            />
-          </label>
-          <p id="welcome-message-hint" className="mt-1 text-xs text-muted-foreground">
-            Use {'{user}'} for the member mention and {'{memberCount}'} for the server member count.
-          </p>
-
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-            <label htmlFor="rules-channel-id" className="space-y-2">
-              <span className="text-sm font-medium">Rules Channel</span>
-              <ChannelSelector
-                id="rules-channel-id"
-                guildId={guildId}
-                selected={
-                  draftConfig.welcome?.rulesChannel ? [draftConfig.welcome.rulesChannel] : []
-                }
-                onChange={(selected) => updateWelcomeField('rulesChannel', selected[0] ?? null)}
-                placeholder="Select rules channel"
-                disabled={saving}
-                maxSelections={1}
-                filter="text"
-              />
-            </label>
-            <label htmlFor="verified-role-id" className="space-y-2">
-              <span className="text-sm font-medium">Verified Role</span>
-              <RoleSelector
-                id="verified-role-id"
-                guildId={guildId}
-                selected={
-                  draftConfig.welcome?.verifiedRole ? [draftConfig.welcome.verifiedRole] : []
-                }
-                onChange={(selected) => updateWelcomeField('verifiedRole', selected[0] ?? null)}
-                placeholder="Select role granted after rules acceptance"
-                disabled={saving}
-                maxSelections={1}
-              />
-            </label>
-            <label htmlFor="intro-channel-id" className="space-y-2">
-              <span className="text-sm font-medium">Intro Channel</span>
-              <ChannelSelector
-                id="intro-channel-id"
-                guildId={guildId}
-                selected={
-                  draftConfig.welcome?.introChannel ? [draftConfig.welcome.introChannel] : []
-                }
-                onChange={(selected) => updateWelcomeField('introChannel', selected[0] ?? null)}
-                placeholder="Select channel to prompt member intros"
-                disabled={saving}
-                maxSelections={1}
-                filter="text"
-              />
-            </label>
-          </div>
+      {/* Welcome Section */}
+      <WelcomeSection
+        draftConfig={draftConfig}
+        guildId={guildId}
+        saving={saving}
+        dmStepsRaw={dmStepsRaw}
+        onEnabledChange={welcomeUpdater.setEnabled}
+        onMessageChange={(value) => welcomeUpdater.setField('message', value)}
+        onFieldChange={welcomeUpdater.setField}
+        onRoleMenuChange={(field, value) => welcomeUpdater.setNestedField('roleMenu', field, value)}
+        onDmSequenceChange={(field, value) =>
+          welcomeUpdater.setNestedField('dmSequence', field, value)
+        }
+        onDmStepsRawChange={setDmStepsRaw}
+      />
 
-          <fieldset className="space-y-2 rounded-md border p-3">
-            <legend className="text-sm font-medium">Role Menu</legend>
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">
-                Enable self-assignable role menu
-              </span>
-              <ToggleSwitch
-                checked={draftConfig.welcome?.roleMenu?.enabled ?? false}
-                onChange={(v) => updateWelcomeRoleMenu('enabled', v)}
-                disabled={saving}
-                label="Role Menu"
-              />
-            </div>
-            <div className="space-y-3">
-              {(draftConfig.welcome?.roleMenu?.options ?? []).map((opt, i) => (
-                <div key={opt.id} className="flex flex-col gap-2 rounded-md border p-2">
-                  <div className="flex items-center gap-2">
-                    <input
-                      type="text"
-                      value={opt.label ?? ''}
-                      onChange={(e) => {
-                        const opts = [...(draftConfig.welcome?.roleMenu?.options ?? [])];
-                        opts[i] = { ...opts[i], label: e.target.value };
-                        updateWelcomeRoleMenu('options', opts);
-                      }}
-                      disabled={saving}
-                      className={`${inputClasses} flex-1`}
-                      placeholder="Label (shown in menu)"
-                    />
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => {
-                        const opts = [...(draftConfig.welcome?.roleMenu?.options ?? [])].filter(
-                          (o) => o.id !== opt.id,
-                        );
-                        updateWelcomeRoleMenu('options', opts);
-                      }}
-                      disabled={saving}
-                      aria-label={`Remove role option ${opt.label || i + 1}`}
-                    >
-                      ✕
-                    </Button>
-                  </div>
-                  <RoleSelector
-                    guildId={guildId}
-                    selected={opt.roleId ? [opt.roleId] : []}
-                    onChange={(selected) => {
-                      const opts = [...(draftConfig.welcome?.roleMenu?.options ?? [])];
-                      opts[i] = { ...opts[i], roleId: selected[0] ?? '' };
-                      updateWelcomeRoleMenu('options', opts);
-                    }}
-                    placeholder="Select role"
-                    disabled={saving}
-                    maxSelections={1}
-                  />
-                  <input
-                    type="text"
-                    value={opt.description ?? ''}
-                    onChange={(e) => {
-                      const opts = [...(draftConfig.welcome?.roleMenu?.options ?? [])];
-                      opts[i] = { ...opts[i], description: e.target.value || undefined };
-                      updateWelcomeRoleMenu('options', opts);
-                    }}
-                    disabled={saving}
-                    className={inputClasses}
-                    placeholder="Description (optional)"
-                  />
-                </div>
-              ))}
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => {
-                  const opts = [
-                    ...(draftConfig.welcome?.roleMenu?.options ?? []),
-                    { id: generateId(), label: '', roleId: '' },
-                  ];
-                  updateWelcomeRoleMenu('options', opts);
-                }}
-                disabled={saving || (draftConfig.welcome?.roleMenu?.options ?? []).length >= 25}
-              >
-                + Add Role Option
-              </Button>
-            </div>
-          </fieldset>
-
-          <fieldset className="space-y-2 rounded-md border p-3">
-            <legend className="text-sm font-medium">DM Sequence</legend>
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">Enable onboarding DMs</span>
-              <ToggleSwitch
-                checked={draftConfig.welcome?.dmSequence?.enabled ?? false}
-                onChange={(v) => updateWelcomeDmSequence('enabled', v)}
-                disabled={saving}
-                label="DM Sequence"
-              />
-            </div>
-            <textarea
-              value={dmStepsRaw}
-              onChange={(e) => setDmStepsRaw(e.target.value)}
-              onBlur={() => {
-                const parsed = dmStepsRaw
-                  .split('\n')
-                  .map((line) => line.trim())
-                  .filter(Boolean);
-                updateWelcomeDmSequence('steps', parsed);
-                setDmStepsRaw(parsed.join('\n'));
-              }}
-              rows={4}
-              disabled={saving}
-              className={inputClasses}
-              placeholder="One DM step per line"
-            />
-          </fieldset>
-        </CardContent>
-      </Card>
+      {/* Moderation Section */}
+      <ModerationSection
+        draftConfig={draftConfig}
+        guildId={guildId}
+        saving={saving}
+        protectRoleIdsRaw={protectRoleIdsRaw}
+        onEnabledChange={moderationUpdater.setEnabled}
+        onFieldChange={moderationUpdater.setField}
+        onDmNotificationChange={(action, value) =>
+          moderationUpdater.setNestedField('dmNotifications', action, value)
+        }
+        onEscalationChange={(enabled) =>
+          moderationUpdater.setNestedField('escalation', 'enabled', enabled)
+        }
+        onRateLimitChange={(field, value) =>
+          moderationUpdater.setNestedField('rateLimit', field, value)
+        }
+        onLinkFilterChange={(field, value) =>
+          moderationUpdater.setNestedField('linkFilter', field, value)
+        }
+        onProtectRolesChange={(field, value) =>
+          moderationUpdater.setNestedField('protectRoles', field, value)
+        }
+        onProtectRoleIdsRawChange={setProtectRoleIdsRaw}
+      />
 
-      {/* Moderation section */}
-      {draftConfig.moderation && (
-        <Card>
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div>
-                <CardTitle className="text-base">Moderation</CardTitle>
-                <CardDescription>
-                  Configure moderation, escalation, and logging settings.
-                </CardDescription>
-              </div>
-              <ToggleSwitch
-                checked={draftConfig.moderation?.enabled ?? false}
-                onChange={updateModerationEnabled}
-                disabled={saving}
-                label="Moderation"
-              />
-            </div>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <label htmlFor="alert-channel-id" className="space-y-2">
-              <span className="text-sm font-medium">Alert Channel</span>
-              <ChannelSelector
-                id="alert-channel-id"
-                guildId={guildId}
-                selected={
-                  draftConfig.moderation?.alertChannelId
-                    ? [draftConfig.moderation.alertChannelId]
-                    : []
-                }
-                onChange={(selected) =>
-                  updateModerationField('alertChannelId', selected[0] ?? null)
-                }
-                placeholder="Select channel for moderation alerts"
-                disabled={saving}
-                maxSelections={1}
-                filter="text"
-              />
-            </label>
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">Auto-delete flagged messages</span>
-              <ToggleSwitch
-                checked={draftConfig.moderation?.autoDelete ?? false}
-                onChange={(v) => updateModerationField('autoDelete', v)}
-                disabled={saving}
-                label="Auto Delete"
-              />
-            </div>
-            <fieldset className="space-y-2">
-              <legend className="text-sm font-medium">DM Notifications</legend>
-              {(['warn', 'timeout', 'kick', 'ban'] as const).map((action) => (
-                <div key={action} className="flex items-center justify-between">
-                  <span className="text-sm capitalize text-muted-foreground">{action}</span>
-                  <ToggleSwitch
-                    checked={draftConfig.moderation?.dmNotifications?.[action] ?? false}
-                    onChange={(v) => updateModerationDmNotification(action, v)}
-                    disabled={saving}
-                    label={`DM on ${action}`}
-                  />
-                </div>
-              ))}
-            </fieldset>
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">Escalation Enabled</span>
-              <ToggleSwitch
-                checked={draftConfig.moderation?.escalation?.enabled ?? false}
-                onChange={(v) => updateModerationEscalation(v)}
-                disabled={saving}
-                label="Escalation"
-              />
-            </div>
-
-            {/* Rate Limiting sub-section */}
-            <fieldset className="space-y-2">
-              <legend className="text-sm font-medium">Rate Limiting</legend>
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">Enabled</span>
-                <ToggleSwitch
-                  checked={draftConfig.moderation?.rateLimit?.enabled ?? false}
-                  onChange={(v) => updateRateLimitField('enabled', v)}
-                  disabled={saving}
-                  label="Rate Limiting"
-                />
-              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <label htmlFor="max-messages" className="space-y-2">
-                  <span className="text-sm text-muted-foreground">Max Messages</span>
-                  <input
-                    id="max-messages"
-                    type="number"
-                    min={1}
-                    value={draftConfig.moderation?.rateLimit?.maxMessages ?? 10}
-                    onChange={(e) => {
-                      const num = parseNumberInput(e.target.value, 1);
-                      if (num !== undefined) updateRateLimitField('maxMessages', num);
-                    }}
-                    disabled={saving}
-                    className={inputClasses}
-                  />
-                </label>
-                <label htmlFor="window-seconds" className="space-y-2">
-                  <span className="text-sm text-muted-foreground">Window (seconds)</span>
-                  <input
-                    id="window-seconds"
-                    type="number"
-                    min={1}
-                    value={draftConfig.moderation?.rateLimit?.windowSeconds ?? 10}
-                    onChange={(e) => {
-                      const num = parseNumberInput(e.target.value, 1);
-                      if (num !== undefined) updateRateLimitField('windowSeconds', num);
-                    }}
-                    disabled={saving}
-                    className={inputClasses}
-                  />
-                </label>
-              </div>
-              <div className="grid grid-cols-3 gap-4">
-                <label htmlFor="mute-after-triggers" className="space-y-2">
-                  <span className="text-sm text-muted-foreground">Mute After Triggers</span>
-                  <input
-                    id="mute-after-triggers"
-                    type="number"
-                    min={1}
-                    value={draftConfig.moderation?.rateLimit?.muteAfterTriggers ?? 3}
-                    onChange={(e) => {
-                      const num = parseNumberInput(e.target.value, 1);
-                      if (num !== undefined) updateRateLimitField('muteAfterTriggers', num);
-                    }}
-                    disabled={saving}
-                    className={inputClasses}
-                  />
-                </label>
-                <label htmlFor="mute-window-s" className="space-y-2">
-                  <span className="text-sm text-muted-foreground">Mute Window (s)</span>
-                  <input
-                    id="mute-window-s"
-                    type="number"
-                    min={1}
-                    value={draftConfig.moderation?.rateLimit?.muteWindowSeconds ?? 300}
-                    onChange={(e) => {
-                      const num = parseNumberInput(e.target.value, 1);
-                      if (num !== undefined) updateRateLimitField('muteWindowSeconds', num);
-                    }}
-                    disabled={saving}
-                    className={inputClasses}
-                  />
-                </label>
-                <label htmlFor="mute-duration-s" className="space-y-2">
-                  <span className="text-sm text-muted-foreground">Mute Duration (s)</span>
-                  <input
-                    id="mute-duration-s"
-                    type="number"
-                    min={1}
-                    value={draftConfig.moderation?.rateLimit?.muteDurationSeconds ?? 300}
-                    onChange={(e) => {
-                      const num = parseNumberInput(e.target.value, 1);
-                      if (num !== undefined) updateRateLimitField('muteDurationSeconds', num);
-                    }}
-                    disabled={saving}
-                    className={inputClasses}
-                  />
-                </label>
-              </div>
-            </fieldset>
-
-            {/* Link Filtering sub-section */}
-            <fieldset className="space-y-2">
-              <legend className="text-sm font-medium">Link Filtering</legend>
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">Enabled</span>
-                <ToggleSwitch
-                  checked={draftConfig.moderation?.linkFilter?.enabled ?? false}
-                  onChange={(v) => updateLinkFilterField('enabled', v)}
-                  disabled={saving}
-                  label="Link Filtering"
-                />
-              </div>
-              <label htmlFor="blocked-domains" className="space-y-2">
-                <span className="text-sm text-muted-foreground">Blocked Domains</span>
-                <input
-                  id="blocked-domains"
-                  type="text"
-                  value={(draftConfig.moderation?.linkFilter?.blockedDomains ?? []).join(', ')}
-                  onChange={(e) =>
-                    updateLinkFilterField(
-                      'blockedDomains',
-                      e.target.value
-                        .split(',')
-                        .map((s) => s.trim())
-                        .filter(Boolean),
-                    )
-                  }
-                  disabled={saving}
-                  className={inputClasses}
-                  placeholder="example.com, spam.net"
-                />
-              </label>
-            </fieldset>
-
-            {/* Protect Roles sub-section */}
-            <fieldset className="space-y-2">
-              <legend className="text-sm font-medium">Protect Roles from Moderation</legend>
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">Enabled</span>
-                <ToggleSwitch
-                  checked={draftConfig.moderation?.protectRoles?.enabled ?? true}
-                  onChange={(v) => updateProtectRolesField('enabled', v)}
-                  disabled={saving}
-                  label="Protect Roles"
-                />
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">Include admins</span>
-                <ToggleSwitch
-                  checked={draftConfig.moderation?.protectRoles?.includeAdmins ?? true}
-                  onChange={(v) => updateProtectRolesField('includeAdmins', v)}
-                  disabled={saving}
-                  label="Include admins"
-                />
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">Include moderators</span>
-                <ToggleSwitch
-                  checked={draftConfig.moderation?.protectRoles?.includeModerators ?? true}
-                  onChange={(v) => updateProtectRolesField('includeModerators', v)}
-                  disabled={saving}
-                  label="Include moderators"
-                />
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">Include server owner</span>
-                <ToggleSwitch
-                  checked={draftConfig.moderation?.protectRoles?.includeServerOwner ?? true}
-                  onChange={(v) => updateProtectRolesField('includeServerOwner', v)}
-                  disabled={saving}
-                  label="Include server owner"
-                />
-              </div>
-              <label htmlFor="additional-protected-roles" className="space-y-2">
-                <span className="text-sm text-muted-foreground">Additional protected roles</span>
-                <RoleSelector
-                  id="additional-protected-roles"
-                  guildId={guildId}
-                  selected={draftConfig.moderation?.protectRoles?.roleIds ?? []}
-                  onChange={(selected) => updateProtectRolesField('roleIds', selected)}
-                  placeholder="Select additional protected roles..."
-                  disabled={saving}
-                />
-              </label>
-            </fieldset>
-          </CardContent>
-        </Card>
-      )}
+      {/* AI Auto-Moderation Section */}
+      <AiAutoModSection
+        draftConfig={draftConfig}
+        saving={saving}
+        onFieldChange={(field, value) => {
+          updateDraftConfig((prev) => ({
+            ...prev,
+            aiAutoMod: { ...((prev.aiAutoMod as Record<string, unknown>) || {}), [field]: value },
+          }));
+        }}
+      />
 
-      {/* AI Auto-Moderation section */}
-      {draftConfig.aiAutoMod && (
-        <Card>
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div>
-                <CardTitle className="text-base">AI Auto-Moderation</CardTitle>
-                <CardDescription>
-                  Use Claude AI to analyze messages and take automatic moderation actions.
-                </CardDescription>
-              </div>
-              <ToggleSwitch
-                checked={Boolean(draftConfig.aiAutoMod?.enabled)}
-                onChange={(v) => updateAiAutoModField('enabled', v)}
-                disabled={saving}
-                label="AI Auto-Moderation"
-              />
-            </div>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <label htmlFor="ai-automod-flag-channel" className="space-y-2">
-              <span className="text-sm font-medium">Flag Review Channel</span>
-              <ChannelSelector
-                id="ai-automod-flag-channel"
-                guildId={guildId}
-                selected={
-                  (draftConfig.aiAutoMod?.flagChannelId as string)
-                    ? [draftConfig.aiAutoMod?.flagChannelId as string]
-                    : []
-                }
-                onChange={(selected) => updateAiAutoModField('flagChannelId', selected[0] ?? null)}
-                placeholder="Select channel for flagged messages"
-                disabled={saving}
-                maxSelections={1}
-                filter="text"
-              />
-            </label>
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">Auto-delete flagged messages</span>
-              <ToggleSwitch
-                checked={Boolean(draftConfig.aiAutoMod?.autoDelete ?? true)}
-                onChange={(v) => updateAiAutoModField('autoDelete', v)}
-                disabled={saving}
-                label="Auto-delete"
-              />
-            </div>
-            <fieldset className="space-y-2">
-              <legend className="text-sm font-medium">Thresholds (0–100)</legend>
-              <p className="text-muted-foreground text-xs">
-                Confidence threshold (%) above which the action triggers.
-              </p>
-              {(['toxicity', 'spam', 'harassment'] as const).map((cat) => (
-                <label
-                  key={cat}
-                  htmlFor={`ai-threshold-${cat}`}
-                  className="flex items-center gap-3"
-                >
-                  <span className="w-24 text-sm capitalize">{cat}</span>
-                  <input
-                    id={`ai-threshold-${cat}`}
-                    type="number"
-                    min={0}
-                    max={100}
-                    step={5}
-                    value={Math.round(
-                      ((draftConfig.aiAutoMod?.thresholds as Record<string, number>)?.[cat] ??
-                        0.7) * 100,
-                    )}
-                    onChange={(e) => {
-                      const raw = Number(e.target.value);
-                      const v = Number.isNaN(raw) ? 0 : Math.min(1, Math.max(0, raw / 100));
-                      updateAiAutoModField('thresholds', {
-                        ...((draftConfig.aiAutoMod?.thresholds as Record<string, number>) ?? {}),
-                        [cat]: v,
-                      });
-                    }}
-                    disabled={saving}
-                    className={`${inputClasses} w-24`}
-                  />
-                  <span className="text-muted-foreground text-xs">%</span>
-                </label>
-              ))}
-            </fieldset>
-            <fieldset className="space-y-2">
-              <legend className="text-sm font-medium">Actions</legend>
-              {(['toxicity', 'spam', 'harassment'] as const).map((cat) => (
-                <label key={cat} htmlFor={`ai-action-${cat}`} className="flex items-center gap-3">
-                  <span className="w-24 text-sm capitalize">{cat}</span>
-                  <select
-                    id={`ai-action-${cat}`}
-                    value={
-                      (draftConfig.aiAutoMod?.actions as Record<string, string>)?.[cat] ?? 'flag'
-                    }
-                    onChange={(e) => {
-                      updateAiAutoModField('actions', {
-                        ...((draftConfig.aiAutoMod?.actions as Record<string, string>) ?? {}),
-                        [cat]: e.target.value,
-                      });
-                    }}
-                    disabled={saving}
-                    className={inputClasses}
-                  >
-                    <option value="none">No action</option>
-                    <option value="delete">Delete message</option>
-                    <option value="flag">Flag for review</option>
-                    <option value="warn">Warn user</option>
-                    <option value="timeout">Timeout user</option>
-                    <option value="kick">Kick user</option>
-                    <option value="ban">Ban user</option>
-                  </select>
-                </label>
-              ))}
-            </fieldset>
-          </CardContent>
-        </Card>
-      )}
+      {/* Triage Section */}
+      <TriageSection
+        draftConfig={draftConfig}
+        saving={saving}
+        onEnabledChange={triageUpdater.setEnabled}
+        onFieldChange={triageUpdater.setField}
+      />
 
-      {/* Triage section */}
-      {draftConfig.triage && (
-        <Card>
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div>
-                <CardTitle className="text-base">Triage</CardTitle>
-                <CardDescription>
-                  Configure message triage classifier, responder models, and channels.
-                </CardDescription>
-              </div>
-              <ToggleSwitch
-                checked={draftConfig.triage?.enabled ?? false}
-                onChange={updateTriageEnabled}
-                disabled={saving}
-                label="Triage"
-              />
-            </div>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <label htmlFor="classify-model" className="space-y-2">
-              <span className="text-sm font-medium">Classify Model</span>
-              <input
-                id="classify-model"
-                type="text"
-                value={draftConfig.triage?.classifyModel ?? ''}
-                onChange={(e) => updateTriageField('classifyModel', e.target.value)}
-                disabled={saving}
-                className={inputClasses}
-                placeholder="e.g. claude-haiku-4-5"
-              />
-            </label>
-            <label htmlFor="respond-model" className="space-y-2">
-              <span className="text-sm font-medium">Respond Model</span>
-              <input
-                id="respond-model"
-                type="text"
-                value={draftConfig.triage?.respondModel ?? ''}
-                onChange={(e) => updateTriageField('respondModel', e.target.value)}
-                disabled={saving}
-                className={inputClasses}
-                placeholder="e.g. claude-sonnet-4-6"
-              />
-            </label>
-            <div className="grid grid-cols-2 gap-4">
-              <label htmlFor="classify-budget" className="space-y-2">
-                <span className="text-sm font-medium">Classify Budget</span>
-                <input
-                  id="classify-budget"
-                  type="number"
-                  step="0.01"
-                  min={0}
-                  value={draftConfig.triage?.classifyBudget ?? 0}
-                  onChange={(e) => {
-                    const num = parseNumberInput(e.target.value, 0);
-                    if (num !== undefined) updateTriageField('classifyBudget', num);
-                  }}
-                  disabled={saving}
-                  className={inputClasses}
-                />
-              </label>
-              <label htmlFor="respond-budget" className="space-y-2">
-                <span className="text-sm font-medium">Respond Budget</span>
-                <input
-                  id="respond-budget"
-                  type="number"
-                  step="0.01"
-                  min={0}
-                  value={draftConfig.triage?.respondBudget ?? 0}
-                  onChange={(e) => {
-                    const num = parseNumberInput(e.target.value, 0);
-                    if (num !== undefined) updateTriageField('respondBudget', num);
-                  }}
-                  disabled={saving}
-                  className={inputClasses}
-                />
-              </label>
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <label htmlFor="default-interval-ms" className="space-y-2">
-                <span className="text-sm font-medium">Default Interval (ms)</span>
-                <input
-                  id="default-interval-ms"
-                  type="number"
-                  min={1}
-                  value={draftConfig.triage?.defaultInterval ?? 3000}
-                  onChange={(e) => {
-                    const num = parseNumberInput(e.target.value, 1);
-                    if (num !== undefined) updateTriageField('defaultInterval', num);
-                  }}
-                  disabled={saving}
-                  className={inputClasses}
-                />
-              </label>
-              <label htmlFor="timeout-ms" className="space-y-2">
-                <span className="text-sm font-medium">Timeout (ms)</span>
-                <input
-                  id="timeout-ms"
-                  type="number"
-                  min={1}
-                  value={draftConfig.triage?.timeout ?? 30000}
-                  onChange={(e) => {
-                    const num = parseNumberInput(e.target.value, 1);
-                    if (num !== undefined) updateTriageField('timeout', num);
-                  }}
-                  disabled={saving}
-                  className={inputClasses}
-                />
-              </label>
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <label htmlFor="context-messages" className="space-y-2">
-                <span className="text-sm font-medium">Context Messages</span>
-                <input
-                  id="context-messages"
-                  type="number"
-                  min={1}
-                  value={draftConfig.triage?.contextMessages ?? 10}
-                  onChange={(e) => {
-                    const num = parseNumberInput(e.target.value, 1);
-                    if (num !== undefined) updateTriageField('contextMessages', num);
-                  }}
-                  disabled={saving}
-                  className={inputClasses}
-                />
-              </label>
-              <label htmlFor="max-buffer-size" className="space-y-2">
-                <span className="text-sm font-medium">Max Buffer Size</span>
-                <input
-                  id="max-buffer-size"
-                  type="number"
-                  min={1}
-                  value={draftConfig.triage?.maxBufferSize ?? 30}
-                  onChange={(e) => {
-                    const num = parseNumberInput(e.target.value, 1);
-                    if (num !== undefined) updateTriageField('maxBufferSize', num);
-                  }}
-                  disabled={saving}
-                  className={inputClasses}
-                />
-              </label>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">Streaming</span>
-              <ToggleSwitch
-                checked={draftConfig.triage?.streaming ?? false}
-                onChange={(v) => updateTriageField('streaming', v)}
-                disabled={saving}
-                label="Streaming"
-              />
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">Moderation Response</span>
-              <ToggleSwitch
-                checked={draftConfig.triage?.moderationResponse ?? false}
-                onChange={(v) => updateTriageField('moderationResponse', v)}
-                disabled={saving}
-                label="Moderation Response"
-              />
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">Debug Footer</span>
-              <ToggleSwitch
-                checked={draftConfig.triage?.debugFooter ?? false}
-                onChange={(v) => updateTriageField('debugFooter', v)}
-                disabled={saving}
-                label="Debug Footer"
-              />
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">Status Reactions</span>
-              <ToggleSwitch
-                checked={draftConfig.triage?.statusReactions ?? false}
-                onChange={(v) => updateTriageField('statusReactions', v)}
-                disabled={saving}
-                label="Status Reactions"
-              />
-            </div>
-            <label htmlFor="moderation-log-channel" className="space-y-2">
-              <span className="text-sm font-medium">Moderation Log Channel</span>
-              <ChannelSelector
-                id="moderation-log-channel"
-                guildId={guildId}
-                selected={
-                  draftConfig.triage?.moderationLogChannel
-                    ? [draftConfig.triage.moderationLogChannel]
-                    : []
-                }
-                onChange={(selected) =>
-                  updateTriageField('moderationLogChannel', selected[0] ?? '')
-                }
-                placeholder="Select channel for moderation logs"
-                disabled={saving}
-                maxSelections={1}
-                filter="text"
-              />
-            </label>
-          </CardContent>
-        </Card>
-      )}
+      {/* Starboard Section */}
+      <StarboardSection
+        draftConfig={draftConfig}
+        saving={saving}
+        onFieldChange={starboardUpdater.setField}
+      />
 
-      {/* Starboard section */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle className="text-base">Starboard</CardTitle>
-              <CardDescription>Pin popular messages to a starboard channel.</CardDescription>
-            </div>
-            <ToggleSwitch
-              checked={draftConfig.starboard?.enabled ?? false}
-              onChange={(v) => updateStarboardField('enabled', v)}
-              disabled={saving}
-              label="Starboard"
-            />
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <label htmlFor="channel-id" className="space-y-2">
-            <span className="text-sm font-medium">Channel</span>
-            <ChannelSelector
-              id="channel-id"
-              guildId={guildId}
-              selected={draftConfig.starboard?.channelId ? [draftConfig.starboard.channelId] : []}
-              onChange={(selected) => updateStarboardField('channelId', selected[0] ?? '')}
-              placeholder="Select starboard channel"
-              disabled={saving}
-              maxSelections={1}
-              filter="text"
-            />
-          </label>
-          <div className="grid grid-cols-2 gap-4">
-            <label htmlFor="threshold" className="space-y-2">
-              <span className="text-sm font-medium">Threshold</span>
-              <input
-                id="threshold"
-                type="number"
-                min={1}
-                value={draftConfig.starboard?.threshold ?? 3}
-                onChange={(e) => {
-                  const num = parseNumberInput(e.target.value, 1);
-                  if (num !== undefined) updateStarboardField('threshold', num);
-                }}
-                disabled={saving}
-                className={inputClasses}
-              />
-            </label>
-            <label htmlFor="emoji" className="space-y-2">
-              <span className="text-sm font-medium">Emoji</span>
-              <div className="flex items-center gap-2">
-                <input
-                  id="emoji"
-                  type="text"
-                  value={draftConfig.starboard?.emoji ?? '*'}
-                  onChange={(e) => updateStarboardField('emoji', e.target.value.trim() || '*')}
-                  disabled={saving}
-                  className={inputClasses}
-                  placeholder="*"
-                />
-                <button
-                  type="button"
-                  onClick={() => updateStarboardField('emoji', '*')}
-                  disabled={saving}
-                  className={`shrink-0 rounded-md px-3 py-2 text-xs font-medium transition-colors ${
-                    draftConfig.starboard?.emoji === '*'
-                      ? 'bg-primary text-primary-foreground'
-                      : 'bg-muted text-muted-foreground hover:bg-accent'
-                  }`}
-                >
-                  Any ✱
-                </button>
-              </div>
-              <p className="text-xs text-muted-foreground">
-                Set a specific emoji (e.g. ⭐ 🔥 👍) or click <strong>Any</strong> to let any emoji
-                trigger the starboard.
-              </p>
-            </label>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-sm font-medium">Allow Self-Star</span>
-            <ToggleSwitch
-              checked={draftConfig.starboard?.selfStarAllowed ?? false}
-              onChange={(v) => updateStarboardField('selfStarAllowed', v)}
-              disabled={saving}
-              label="Self-Star Allowed"
-            />
-          </div>
-          <label htmlFor="ignored-channels" className="space-y-2">
-            <span className="text-sm font-medium">Ignored Channels</span>
-            <ChannelSelector
-              id="ignored-channels"
-              guildId={guildId}
-              selected={draftConfig.starboard?.ignoredChannels ?? []}
-              onChange={(selected) => updateStarboardField('ignoredChannels', selected)}
-              placeholder="Select channels to ignore..."
-              disabled={saving}
-              filter="text"
-            />
-          </label>
-        </CardContent>
-      </Card>
+      {/* Permissions Section */}
+      <PermissionsSection
+        draftConfig={draftConfig}
+        guildId={guildId}
+        saving={saving}
+        onFieldChange={permissionsUpdater.setField}
+      />
 
-      {/* Permissions section */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle className="text-base">Permissions</CardTitle>
-              <CardDescription>
-                Configure role-based access and bot owner overrides.
-              </CardDescription>
-            </div>
-            <ToggleSwitch
-              checked={draftConfig.permissions?.enabled ?? false}
-              onChange={(v) => updatePermissionsField('enabled', v)}
-              disabled={saving}
-              label="Permissions"
-            />
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <label htmlFor="admin-role-id" className="space-y-2">
-            <span className="text-sm font-medium">Admin Role ID</span>
-            <RoleSelector
-              id="admin-role-id"
-              guildId={guildId}
-              selected={
-                draftConfig.permissions?.adminRoleId ? [draftConfig.permissions.adminRoleId] : []
-              }
-              onChange={(selected) => updatePermissionsField('adminRoleId', selected[0] ?? null)}
-              placeholder="Select admin role"
-              disabled={saving}
-              maxSelections={1}
-            />
-          </label>
-          <label htmlFor="moderator-role-id" className="space-y-2">
-            <span className="text-sm font-medium">Moderator Role ID</span>
-            <RoleSelector
-              id="moderator-role-id"
-              guildId={guildId}
-              selected={
-                draftConfig.permissions?.moderatorRoleId
-                  ? [draftConfig.permissions.moderatorRoleId]
-                  : []
-              }
-              onChange={(selected) =>
-                updatePermissionsField('moderatorRoleId', selected[0] ?? null)
-              }
-              placeholder="Select moderator role"
-              disabled={saving}
-              maxSelections={1}
-            />
-          </label>
-          <label htmlFor="bot-owners" className="space-y-2">
-            <span className="text-sm font-medium">Bot Owners</span>
-            <input
-              id="bot-owners"
-              type="text"
-              value={(draftConfig.permissions?.botOwners ?? []).join(', ')}
-              onChange={(e) =>
-                updatePermissionsField(
-                  'botOwners',
-                  e.target.value
-                    .split(',')
-                    .map((s) => s.trim())
-                    .filter(Boolean),
-                )
-              }
-              disabled={saving}
-              className={inputClasses}
-              placeholder="Comma-separated user IDs"
-            />
-          </label>
-        </CardContent>
-      </Card>
+      {/* Memory Section */}
+      <MemorySection
+        draftConfig={draftConfig}
+        saving={saving}
+        onEnabledChange={memoryUpdater.setEnabled}
+        onFieldChange={memoryUpdater.setField}
+      />
 
-      {/* Memory section */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle className="text-base">Memory</CardTitle>
-              <CardDescription>Configure AI context memory and auto-extraction.</CardDescription>
-            </div>
-            <ToggleSwitch
-              checked={draftConfig.memory?.enabled ?? false}
-              onChange={(v) => updateMemoryField('enabled', v)}
-              disabled={saving}
-              label="Memory"
-            />
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <label htmlFor="max-context-memories" className="space-y-2">
-            <span className="text-sm font-medium">Max Context Memories</span>
-            <input
-              id="max-context-memories"
-              type="number"
-              min={1}
-              value={draftConfig.memory?.maxContextMemories ?? 10}
-              onChange={(e) => {
-                const num = parseNumberInput(e.target.value, 1);
-                if (num !== undefined) updateMemoryField('maxContextMemories', num);
-              }}
-              disabled={saving}
-              className={inputClasses}
-            />
-          </label>
-          <div className="flex items-center justify-between">
-            <span className="text-sm font-medium">Auto-Extract</span>
-            <ToggleSwitch
-              checked={draftConfig.memory?.autoExtract ?? false}
-              onChange={(v) => updateMemoryField('autoExtract', v)}
-              disabled={saving}
-              label="Auto-Extract"
-            />
-          </div>
-        </CardContent>
-      </Card>
+      {/* Community Features Section */}
+      <CommunityFeaturesSection
+        draftConfig={draftConfig}
+        saving={saving}
+        onToggleChange={(key, enabled) => {
+          updateDraftConfig((prev) => ({
+            ...prev,
+            [key]: {
+              ...((prev[key as keyof GuildConfig] as Record<string, unknown>) || {}),
+              enabled,
+            },
+          }));
+        }}
+      />
 
-      {/* ═══ Community Feature Toggles ═══ */}
-      <Card>
-        <CardContent className="space-y-4 pt-6">
-          <div className="flex items-center justify-between">
-            <CardTitle className="text-base">Community Features</CardTitle>
-          </div>
-          <p className="text-xs text-muted-foreground">
-            Enable or disable community commands per guild.
-          </p>
-          {(
-            [
-              { key: 'help', label: 'Help / FAQ', desc: '/help command for server knowledge base' },
-              { key: 'announce', label: 'Announcements', desc: '/announce for scheduled messages' },
-              {
-                key: 'snippet',
-                label: 'Code Snippets',
-                desc: '/snippet for saving and sharing code',
-              },
-              { key: 'poll', label: 'Polls', desc: '/poll for community voting' },
-              {
-                key: 'showcase',
-                label: 'Project Showcase',
-                desc: '/showcase to submit, browse, and upvote projects',
-              },
-              {
-                key: 'review',
-                label: 'Code Reviews',
-                desc: '/review peer code review requests with claim workflow',
-              },
-              { key: 'tldr', label: 'TL;DR Summaries', desc: '/tldr for AI channel summaries' },
-              { key: 'afk', label: 'AFK System', desc: '/afk auto-respond when members are away' },
-              {
-                key: 'engagement',
-                label: 'Engagement Tracking',
-                desc: '/profile stats — messages, reactions, days active',
-              },
-            ] as const
-          ).map(({ key, label, desc }) => (
-            <div key={key} className="flex items-center justify-between">
-              <div>
-                <span className="text-sm font-medium">{label}</span>
-                <p className="text-xs text-muted-foreground">{desc}</p>
-              </div>
-              <ToggleSwitch
-                checked={draftConfig[key]?.enabled ?? false}
-                onChange={(v) => {
-                  updateDraftConfig((prev) => ({
-                    ...prev,
-                    [key]: { ...prev[key], enabled: v },
-                  }));
-                }}
-                disabled={saving}
-                label={label}
-              />
-            </div>
-          ))}
-        </CardContent>
-      </Card>
+      {/* Engagement / Activity Badges Section */}
+      <EngagementSection
+        draftConfig={draftConfig}
+        saving={saving}
+        onActivityBadgesChange={(badges) => {
+          updateDraftConfig((prev) => ({
+            ...prev,
+            engagement: { ...(prev.engagement || {}), activityBadges: badges },
+          }));
+        }}
+      />
 
-      {/* ═══ Engagement / Activity Badges ═══ */}
-      <Card>
-        <CardContent className="space-y-4 pt-6">
-          <CardTitle className="text-base">Activity Badges</CardTitle>
-          <p className="text-xs text-muted-foreground">
-            Configure the badge tiers shown on /profile. Each badge requires a minimum number of
-            active days.
-          </p>
-          {(draftConfig.engagement?.activityBadges ?? DEFAULT_ACTIVITY_BADGES).map(
-            (badge: { days?: number; label?: string }, i: number) => (
-              <div
-                key={`badge-${badge.days ?? 0}-${badge.label ?? i}`}
-                className="flex items-center gap-2"
-              >
-                <Input
-                  className="w-20"
-                  type="number"
-                  min={0}
-                  value={badge.days ?? 0}
-                  onChange={(e) => {
-                    const badges = [
-                      ...(draftConfig.engagement?.activityBadges ?? DEFAULT_ACTIVITY_BADGES),
-                    ];
-                    badges[i] = {
-                      ...badges[i],
-                      days: Math.max(0, parseInt(e.target.value, 10) || 0),
-                    };
-                    updateDraftConfig((prev) => ({
-                      ...prev,
-                      engagement: { ...prev.engagement, activityBadges: badges },
-                    }));
-                  }}
-                  disabled={saving}
-                />
-                <span className="text-xs text-muted-foreground">days →</span>
-                <Input
-                  className="flex-1"
-                  value={badge.label ?? ''}
-                  onChange={(e) => {
-                    const badges = [
-                      ...(draftConfig.engagement?.activityBadges ?? DEFAULT_ACTIVITY_BADGES),
-                    ];
-                    badges[i] = { ...badges[i], label: e.target.value };
-                    updateDraftConfig((prev) => ({
-                      ...prev,
-                      engagement: { ...prev.engagement, activityBadges: badges },
-                    }));
-                  }}
-                  disabled={saving}
-                />
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => {
-                    const badges = [...(draftConfig.engagement?.activityBadges ?? [])].filter(
-                      (_, idx) => idx !== i,
-                    );
-                    updateDraftConfig((prev) => ({
-                      ...prev,
-                      engagement: { ...prev.engagement, activityBadges: badges },
-                    }));
-                  }}
-                  disabled={
-                    saving ||
-                    (draftConfig.engagement?.activityBadges ?? DEFAULT_ACTIVITY_BADGES).length <= 1
-                  }
-                >
-                  ✕
-                </Button>
-              </div>
-            ),
-          )}
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              const badges = [
-                ...(draftConfig.engagement?.activityBadges ?? DEFAULT_ACTIVITY_BADGES),
-                { days: 0, label: '🌟 New Badge' },
-              ];
-              updateDraftConfig((prev) => ({
-                ...prev,
-                engagement: { ...prev.engagement, activityBadges: badges },
-              }));
-            }}
-            disabled={saving}
-          >
-            + Add Badge
-          </Button>
-        </CardContent>
-      </Card>
+      {/* Reputation / XP Section */}
+      <ReputationSection
+        draftConfig={draftConfig}
+        saving={saving}
+        onEnabledChange={reputationUpdater.setEnabled}
+        onFieldChange={reputationUpdater.setField}
+      />
 
-      {/* ═══ Reputation / XP Settings ═══ */}
-      <Card>
-        <CardContent className="space-y-4 pt-6">
-          <div className="flex items-center justify-between">
-            <CardTitle className="text-base">Reputation / XP</CardTitle>
-            <ToggleSwitch
-              checked={draftConfig.reputation?.enabled ?? false}
-              onChange={(v) =>
-                updateDraftConfig((prev) => ({
-                  ...prev,
-                  reputation: { ...prev.reputation, enabled: v },
-                }))
-              }
-              disabled={saving}
-              label="Reputation"
-            />
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <label htmlFor="xp-per-message-min" className="space-y-2">
-              <span className="text-sm font-medium">XP per Message (min)</span>
-              <input
-                id="xp-per-message-min"
-                type="number"
-                min={1}
-                max={100}
-                value={draftConfig.reputation?.xpPerMessage?.[0] ?? 5}
-                onChange={(e) => {
-                  const num = parseNumberInput(e.target.value, 1, 100);
-                  if (num !== undefined) {
-                    const range = draftConfig.reputation?.xpPerMessage ?? [5, 15];
-                    const newMax = num > range[1] ? num : range[1];
-                    updateDraftConfig((prev) => ({
-                      ...prev,
-                      reputation: { ...prev.reputation, xpPerMessage: [num, newMax] },
-                    }));
-                  }
-                }}
-                disabled={saving}
-                className={inputClasses}
-              />
-            </label>
-            <label htmlFor="xp-per-message-max" className="space-y-2">
-              <span className="text-sm font-medium">XP per Message (max)</span>
-              <input
-                id="xp-per-message-max"
-                type="number"
-                min={1}
-                max={100}
-                value={draftConfig.reputation?.xpPerMessage?.[1] ?? 15}
-                onChange={(e) => {
-                  const num = parseNumberInput(e.target.value, 1, 100);
-                  if (num !== undefined) {
-                    const range = draftConfig.reputation?.xpPerMessage ?? [5, 15];
-                    const newMin = num < range[0] ? num : range[0];
-                    updateDraftConfig((prev) => ({
-                      ...prev,
-                      reputation: { ...prev.reputation, xpPerMessage: [newMin, num] },
-                    }));
-                  }
-                }}
-                disabled={saving}
-                className={inputClasses}
-              />
-            </label>
-            <label htmlFor="xp-cooldown-seconds" className="space-y-2">
-              <span className="text-sm font-medium">XP Cooldown (seconds)</span>
-              <input
-                id="xp-cooldown-seconds"
-                type="number"
-                min={0}
-                value={draftConfig.reputation?.xpCooldownSeconds ?? 60}
-                onChange={(e) => {
-                  const num = parseNumberInput(e.target.value, 0);
-                  if (num !== undefined)
-                    updateDraftConfig((prev) => ({
-                      ...prev,
-                      reputation: { ...prev.reputation, xpCooldownSeconds: num },
-                    }));
-                }}
-                disabled={saving}
-                className={inputClasses}
-              />
-            </label>
-            <label htmlFor="announce-channel-id" className="space-y-2">
-              <span className="text-sm font-medium">Announce Channel</span>
-              <ChannelSelector
-                id="announce-channel-id"
-                guildId={guildId}
-                selected={
-                  draftConfig.reputation?.announceChannelId
-                    ? [draftConfig.reputation.announceChannelId]
-                    : []
-                }
-                onChange={(selected) =>
-                  updateDraftConfig((prev) => ({
-                    ...prev,
-                    reputation: {
-                      ...prev.reputation,
-                      announceChannelId: selected[0] ?? null,
-                    },
-                  }))
-                }
-                placeholder="Select channel for level-up announcements"
-                disabled={saving}
-                maxSelections={1}
-                filter="text"
-              />
-            </label>
-          </div>
-          <label htmlFor="level-thresholds-comma-separated" className="space-y-2">
-            <span className="text-sm font-medium">
-              Level Thresholds (comma-separated XP values)
-            </span>
-            <input
-              id="level-thresholds-comma-separated"
-              type="text"
-              value={(
-                draftConfig.reputation?.levelThresholds ?? [
-                  100, 300, 600, 1000, 1500, 2500, 4000, 6000, 8500, 12000,
-                ]
-              ).join(', ')}
-              onChange={(e) => {
-                const nums = e.target.value
-                  .split(',')
-                  .map((s) => Number(s.trim()))
-                  .filter((n) => Number.isFinite(n) && n > 0);
-                if (nums.length > 0) {
-                  const sorted = [...nums].sort((a, b) => a - b);
-                  updateDraftConfig((prev) => ({
-                    ...prev,
-                    reputation: { ...prev.reputation, levelThresholds: sorted },
-                  }));
-                }
-              }}
-              disabled={saving}
-              className={inputClasses}
-              placeholder="100, 300, 600, 1000, ..."
-            />
-            <p className="text-xs text-muted-foreground">
-              XP required for each level (L1, L2, L3, ...). Add more values for more levels.
-            </p>
-          </label>
-        </CardContent>
-      </Card>
+      {/* Daily Coding Challenges Section */}
+      <ChallengesSection
+        draftConfig={draftConfig}
+        saving={saving}
+        onEnabledChange={challengesUpdater.setEnabled}
+        onFieldChange={challengesUpdater.setField}
+      />
 
-      {/* ═══ Daily Coding Challenges ═══ */}
-      <Card>
-        <CardContent className="space-y-4 pt-6">
-          <div className="flex items-center justify-between">
-            <CardTitle className="text-base">Daily Coding Challenges</CardTitle>
-            <ToggleSwitch
-              checked={draftConfig.challenges?.enabled ?? false}
-              onChange={(v) =>
-                updateDraftConfig(
-                  (prev) =>
-                    ({ ...prev, challenges: { ...prev.challenges, enabled: v } }) as GuildConfig,
-                )
-              }
-              disabled={saving}
-              label="Challenges"
-            />
-          </div>
-          <p className="text-xs text-muted-foreground">
-            Auto-post a daily coding challenge with hint and solve tracking.
-          </p>
-          <div className="grid grid-cols-2 gap-4">
-            <label htmlFor="challenge-channel-id" className="space-y-2">
-              <span className="text-sm font-medium">Challenge Channel</span>
-              <ChannelSelector
-                id="challenge-channel-id"
-                guildId={guildId}
-                selected={
-                  draftConfig.challenges?.channelId ? [draftConfig.challenges.channelId] : []
-                }
-                onChange={(selected) =>
-                  updateDraftConfig(
-                    (prev) =>
-                      ({
-                        ...prev,
-                        challenges: {
-                          ...prev.challenges,
-                          channelId: selected[0] ?? null,
-                        },
-                      }) as GuildConfig,
-                  )
-                }
-                placeholder="Select channel for daily challenges"
-                disabled={saving}
-                maxSelections={1}
-                filter="text"
-              />
-            </label>
-            <label htmlFor="post-time-hh-mm" className="space-y-2">
-              <span className="text-sm font-medium">Post Time (HH:MM)</span>
-              <input
-                id="post-time-hh-mm"
-                type="text"
-                value={draftConfig.challenges?.postTime ?? '09:00'}
-                onChange={(e) =>
-                  updateDraftConfig(
-                    (prev) =>
-                      ({
-                        ...prev,
-                        challenges: { ...prev.challenges, postTime: e.target.value },
-                      }) as GuildConfig,
-                  )
-                }
-                disabled={saving}
-                className={inputClasses}
-                placeholder="09:00"
-              />
-            </label>
-            <label className="space-y-2 col-span-2">
-              <span className="text-sm font-medium">Timezone</span>
-              <input
-                type="text"
-                value={draftConfig.challenges?.timezone ?? 'America/New_York'}
-                onChange={(e) =>
-                  updateDraftConfig(
-                    (prev) =>
-                      ({
-                        ...prev,
-                        challenges: { ...prev.challenges, timezone: e.target.value },
-                      }) as GuildConfig,
-                  )
-                }
-                disabled={saving}
-                className={inputClasses}
-                placeholder="America/New_York"
-              />
-              <p className="text-xs text-muted-foreground">
-                IANA timezone (e.g. America/Chicago, Europe/London)
-              </p>
-            </label>
-          </div>
-        </CardContent>
-      </Card>
+      {/* GitHub Feed Section */}
+      <GitHubSection
+        draftConfig={draftConfig}
+        saving={saving}
+        onFieldChange={(field, value) => {
+          updateDraftConfig((prev) => ({
+            ...prev,
+            github: {
+              ...(prev.github || {}),
+              feed: { ...(prev.github?.feed || {}), [field]: value },
+            },
+          }));
+        }}
+      />
 
-      {/* ═══ GitHub Feed Settings ═══ */}
-      <Card>
-        <CardContent className="space-y-4 pt-6">
-          <div className="flex items-center justify-between">
-            <CardTitle className="text-base">GitHub Activity Feed</CardTitle>
-            <ToggleSwitch
-              checked={draftConfig.github?.feed?.enabled ?? false}
-              onChange={(v) =>
-                updateDraftConfig((prev) => ({
-                  ...prev,
-                  github: { ...prev.github, feed: { ...prev.github?.feed, enabled: v } },
-                }))
-              }
-              disabled={saving}
-              label="GitHub Feed"
-            />
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <label htmlFor="feed-channel-id" className="space-y-2">
-              <span className="text-sm font-medium">Feed Channel</span>
-              <ChannelSelector
-                id="feed-channel-id"
-                guildId={guildId}
-                selected={
-                  draftConfig.github?.feed?.channelId ? [draftConfig.github.feed.channelId] : []
-                }
-                onChange={(selected) =>
-                  updateDraftConfig((prev) => ({
-                    ...prev,
-                    github: {
-                      ...prev.github,
-                      feed: { ...prev.github?.feed, channelId: selected[0] ?? null },
-                    },
-                  }))
-                }
-                placeholder="Select channel for GitHub updates"
-                disabled={saving}
-                maxSelections={1}
-                filter="text"
-              />
-            </label>
-            <label htmlFor="poll-interval-minutes" className="space-y-2">
-              <span className="text-sm font-medium">Poll Interval (minutes)</span>
-              <input
-                id="poll-interval-minutes"
-                type="number"
-                min={1}
-                value={draftConfig.github?.feed?.pollIntervalMinutes ?? 5}
-                onChange={(e) => {
-                  const num = parseNumberInput(e.target.value, 1);
-                  if (num !== undefined)
-                    updateDraftConfig((prev) => ({
-                      ...prev,
-                      github: {
-                        ...prev.github,
-                        feed: { ...prev.github?.feed, pollIntervalMinutes: num },
-                      },
-                    }));
-                }}
-                disabled={saving}
-                className={inputClasses}
-              />
-            </label>
-          </div>
-        </CardContent>
-      </Card>
+      {/* Tickets Section */}
+      <TicketsSection
+        draftConfig={draftConfig}
+        saving={saving}
+        onEnabledChange={(enabled) => {
+          updateDraftConfig((prev) => ({
+            ...prev,
+            tickets: { ...(prev.tickets || {}), enabled },
+          }));
+        }}
+        onFieldChange={(field, value) => {
+          updateDraftConfig((prev) => ({
+            ...prev,
+            tickets: { ...(prev.tickets || {}), [field]: value },
+          }));
+        }}
+      />
 
-      {/* ═══ Tickets ═══ */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <CardTitle className="text-base">Tickets</CardTitle>
-            <ToggleSwitch
-              checked={draftConfig.tickets?.enabled ?? false}
-              onChange={(v) =>
-                updateDraftConfig((prev) => ({
-                  ...prev,
-                  tickets: { ...prev.tickets, enabled: v },
-                }))
-              }
-              disabled={saving}
-              label="Tickets"
-            />
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <label htmlFor="ticket-mode" className="space-y-2">
-            <span className="text-sm font-medium">Ticket Mode</span>
-            <select
-              id="ticket-mode"
-              value={draftConfig.tickets?.mode ?? 'thread'}
-              onChange={(e) =>
-                updateDraftConfig((prev) => ({
-                  ...prev,
-                  tickets: { ...prev.tickets, mode: e.target.value as 'thread' | 'channel' },
-                }))
-              }
-              disabled={saving}
-              className={inputClasses}
-            >
-              <option value="thread">Thread (private thread per ticket)</option>
-              <option value="channel">Channel (dedicated text channel per ticket)</option>
-            </select>
-            <p className="text-xs text-muted-foreground">
-              Thread mode creates private threads. Channel mode creates locked text channels with
-              permission overrides.
-            </p>
-          </label>
-          <div className="grid grid-cols-2 gap-4">
-            <label htmlFor="support-role-id" className="space-y-2">
-              <span className="text-sm font-medium">Support Role</span>
-              <RoleSelector
-                id="support-role-id"
-                guildId={guildId}
-                selected={draftConfig.tickets?.supportRole ? [draftConfig.tickets.supportRole] : []}
-                onChange={(selected) =>
-                  updateDraftConfig((prev) => ({
-                    ...prev,
-                    tickets: { ...prev.tickets, supportRole: selected[0] ?? null },
-                  }))
-                }
-                placeholder="Select support staff role"
-                disabled={saving}
-                maxSelections={1}
-              />
-            </label>
-            <label htmlFor="category-channel-id" className="space-y-2">
-              <span className="text-sm font-medium">Category Channel ID</span>
-              <input
-                id="category-channel-id"
-                type="text"
-                value={draftConfig.tickets?.category ?? ''}
-                onChange={(e) =>
-                  updateDraftConfig((prev) => ({
-                    ...prev,
-                    tickets: { ...prev.tickets, category: e.target.value.trim() || null },
-                  }))
-                }
-                disabled={saving}
-                className={inputClasses}
-                placeholder="Category for tickets"
-              />
-            </label>
-            <label htmlFor="auto-close-hours" className="space-y-2">
-              <span className="text-sm font-medium">Auto-Close Hours</span>
-              <input
-                id="auto-close-hours"
-                type="number"
-                min="1"
-                max="720"
-                value={draftConfig.tickets?.autoCloseHours ?? 48}
-                onChange={(e) => {
-                  const num = parseNumberInput(e.target.value, 1, 720);
-                  if (num !== undefined)
-                    updateDraftConfig((prev) => ({
-                      ...prev,
-                      tickets: { ...prev.tickets, autoCloseHours: num },
-                    }));
-                }}
-                disabled={saving}
-                className={inputClasses}
-              />
-              <p className="text-xs text-muted-foreground">
-                Hours of inactivity before warning (then +24h to close)
-              </p>
-            </label>
-            <label htmlFor="max-open-per-user" className="space-y-2">
-              <span className="text-sm font-medium">Max Open Per User</span>
-              <input
-                id="max-open-per-user"
-                type="number"
-                min="1"
-                max="20"
-                value={draftConfig.tickets?.maxOpenPerUser ?? 3}
-                onChange={(e) => {
-                  const num = parseNumberInput(e.target.value, 1, 20);
-                  if (num !== undefined)
-                    updateDraftConfig((prev) => ({
-                      ...prev,
-                      tickets: { ...prev.tickets, maxOpenPerUser: num },
-                    }));
-                }}
-                disabled={saving}
-                className={inputClasses}
-              />
-            </label>
-            <label htmlFor="transcript-channel" className="space-y-2 col-span-2">
-              <span className="text-sm font-medium">Transcript Channel</span>
-              <ChannelSelector
-                id="transcript-channel"
-                guildId={guildId}
-                selected={
-                  draftConfig.tickets?.transcriptChannel
-                    ? [draftConfig.tickets.transcriptChannel]
-                    : []
-                }
-                onChange={(selected) =>
-                  updateDraftConfig((prev) => ({
-                    ...prev,
-                    tickets: { ...prev.tickets, transcriptChannel: selected[0] ?? null },
-                  }))
-                }
-                placeholder="Select channel for ticket transcripts"
-                disabled={saving}
-                maxSelections={1}
-                filter="text"
-              />
-            </label>
-          </div>
-        </CardContent>
-      </Card>
-      {/* Inline diff view — shows pending changes below the form */}
+      {/* Inline diff view */}
       {hasChanges && savedConfig && <ConfigDiff original={savedConfig} modified={draftConfig} />}
 
-      {/* Diff modal — shown before saving to require explicit confirmation */}
+      {/* Diff modal */}
       {savedConfig && (
         <ConfigDiffModal
           open={showDiffModal}
@@ -2497,141 +762,3 @@ export function ConfigEditor() {
     </div>
   );
 }
-
-// ── Toggle Switch ───────────────────────────────────────────────
-
-interface ToggleSwitchProps {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  disabled?: boolean;
-  label: string;
-}
-
-/**
- * Renders an accessible toggle switch control.
- *
- * The switch reflects the `checked` state, calls `onChange` with the new boolean value when toggled,
- * and exposes an ARIA label derived from `label`.
- *
- * @param checked - Current on/off state of the switch.
- * @param onChange - Callback invoked with the new checked state when the switch is toggled.
- * @param disabled - When true, disables user interaction and applies disabled styling.
- * @param label - Human-readable name used for the switch's ARIA label.
- * @returns The button element acting as the toggle switch.
- */
-function ToggleSwitch({ checked, onChange, disabled, label }: ToggleSwitchProps) {
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={checked}
-      aria-label={`Toggle ${label}`}
-      disabled={disabled}
-      onClick={() => onChange(!checked)}
-      className="relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 aria-checked:bg-primary aria-[checked=false]:bg-muted"
-    >
-      <span
-        aria-hidden="true"
-        className="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5"
-        data-state={checked ? 'checked' : 'unchecked'}
-      />
-    </button>
-  );
-}
-
-// ── Helpers ────────────────────────────────────────────────────────
-
-/**
- * Determine whether two JSON-serializable values are deeply equal by recursively comparing primitives, arrays, and plain objects.
- *
- * @param a - First value to compare
- * @param b - Second value to compare
- * @returns `true` if `a` and `b` are structurally equal, `false` otherwise
- */
-function deepEqual(a: unknown, b: unknown): boolean {
-  if (a === b) return true;
-  if (a === null || b === null) return false;
-  if (typeof a !== typeof b) return false;
-
-  if (Array.isArray(a)) {
-    if (!Array.isArray(b) || a.length !== b.length) return false;
-    return a.every((item, i) => deepEqual(item, b[i]));
-  }
-
-  if (typeof a === 'object') {
-    const aObj = a as Record<string, unknown>;
-    const bObj = b as Record<string, unknown>;
-    const aKeys = Object.keys(aObj);
-    const bKeys = Object.keys(bObj);
-    if (aKeys.length !== bKeys.length) return false;
-    return aKeys.every((key) => Object.hasOwn(bObj, key) && deepEqual(aObj[key], bObj[key]));
-  }
-
-  return false;
-}
-
-/**
- * Compute a flat list of dot-path patches that describe differences between two guild configs.
- *
- * Skips the root-level `guildId`, recurses into plain objects to emit leaf-level changes,
- * and produces a patch for any differing non-object value or array.
- *
- * @param original - The original (server-authoritative) guild configuration to compare against
- * @param modified - The modified guild configuration containing desired updates
- * @returns An array of patches where each item has a dot-separated `path` to the changed field and `value` set to the new value
- */
-function computePatches(
-  original: GuildConfig,
-  modified: GuildConfig,
-): Array<{ path: string; value: unknown }> {
-  const patches: Array<{ path: string; value: unknown }> = [];
-
-  /**
-   * Traverse two plain-object trees and record leaf-level differences as path/value patches.
-   *
-   * Walks the structures rooted at `origObj` and `modObj`, compares values recursively, and appends
-   * a patch { path, value } to the outer-scope `patches` array for each leaf or differing non-object
-   * value in `modObj`. The root-level field named "guildId" is ignored.
-   *
-   * @param origObj - The original (source) object to compare against
-   * @param modObj - The modified (target) object to derive patches from
-   * @param prefix - Current dot-separated path prefix for nested keys (use empty string for root)
-   */
-  function walk(origObj: Record<string, unknown>, modObj: Record<string, unknown>, prefix: string) {
-    const allKeys = new Set([...Object.keys(origObj), ...Object.keys(modObj)]);
-
-    for (const key of allKeys) {
-      // Skip the guildId metadata field
-      if (prefix === '' && key === 'guildId') continue;
-
-      const fullPath = prefix ? `${prefix}.${key}` : key;
-      const origVal = origObj[key];
-      const modVal = modObj[key];
-
-      if (deepEqual(origVal, modVal)) continue;
-
-      // If both are plain objects, recurse to find the leaf changes
-      if (
-        typeof origVal === 'object' &&
-        origVal !== null &&
-        !Array.isArray(origVal) &&
-        typeof modVal === 'object' &&
-        modVal !== null &&
-        !Array.isArray(modVal)
-      ) {
-        walk(origVal as Record<string, unknown>, modVal as Record<string, unknown>, fullPath);
-      } else {
-        const patchValue = !Object.hasOwn(modObj, key) || modVal === undefined ? null : modVal;
-        patches.push({ path: fullPath, value: patchValue });
-      }
-    }
-  }
-
-  walk(
-    original as unknown as Record<string, unknown>,
-    modified as unknown as Record<string, unknown>,
-    '',
-  );
-
-  return patches;
-}
diff --git a/web/src/components/dashboard/config-sections/AiAutoModSection.tsx b/web/src/components/dashboard/config-sections/AiAutoModSection.tsx
index 7b9a17ef1..4566d4d42 100644
--- a/web/src/components/dashboard/config-sections/AiAutoModSection.tsx
+++ b/web/src/components/dashboard/config-sections/AiAutoModSection.tsx
@@ -1,34 +1,9 @@
 'use client';
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { ChannelSelector } from '@/components/ui/channel-selector';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Slider } from '@/components/ui/slider';
-import { Switch } from '@/components/ui/switch';
-import { useGuildSelection } from '@/hooks/use-guild-selection';
+import { decimalToPercent, percentToDecimal } from '@/lib/config-normalization';
 import type { GuildConfig } from '@/lib/config-utils';
-
-const ACTION_OPTIONS = [
-  { value: 'none', label: 'No action' },
-  { value: 'delete', label: 'Delete message' },
-  { value: 'flag', label: 'Flag for review' },
-  { value: 'warn', label: 'Warn user' },
-  { value: 'timeout', label: 'Timeout user' },
-  { value: 'kick', label: 'Kick user' },
-  { value: 'ban', label: 'Ban user' },
-] as const;
-
-const MODEL_OPTIONS = [
-  { value: 'claude-haiku-4-5', label: 'Claude Haiku (fast, low cost)' },
-  { value: 'claude-sonnet-4-5', label: 'Claude Sonnet (balanced)' },
-] as const;
+import { ToggleSwitch } from '../toggle-switch';
 
 interface AiAutoModSectionProps {
   draftConfig: GuildConfig;
@@ -36,62 +11,28 @@ interface AiAutoModSectionProps {
   onFieldChange: (field: string, value: unknown) => void;
 }
 
+/** Shared input styling for text inputs and selects. */
+const inputClasses =
+  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+
 /**
- * Render the AI Auto-Moderation settings section.
- * Controls enabling/disabling AI analysis, per-category thresholds and actions,
- * flag channel selection, and model selection.
+ * AI Auto-Moderation configuration section.
+ *
+ * Provides controls for AI-powered moderation including thresholds,
+ * actions per category (toxicity, spam, harassment), and auto-delete settings.
  */
 export function AiAutoModSection({ draftConfig, saving, onFieldChange }: AiAutoModSectionProps) {
-  const guildId = useGuildSelection();
-  const cfg = draftConfig.aiAutoMod as Record<string, unknown> | undefined;
-
-  if (!cfg) return null;
-
-  const enabled = Boolean(cfg.enabled);
-  const thresholds = (cfg.thresholds as Record<string, number>) ?? {
-    toxicity: 0.7,
-    spam: 0.8,
-    harassment: 0.7,
-  };
-  const actions = (cfg.actions as Record<string, string>) ?? {
-    toxicity: 'flag',
-    spam: 'delete',
-    harassment: 'warn',
+  // Provide defaults so section renders even when aiAutoMod is missing
+  const cfg = draftConfig.aiAutoMod ?? {
+    enabled: false,
+    thresholds: { toxicity: 0.7, spam: 0.7, harassment: 0.7 },
+    actions: { toxicity: 'flag', spam: 'flag', harassment: 'flag' },
+    flagChannelId: null,
+    autoDelete: true,
   };
-  const flagChannelId = (cfg.flagChannelId as string) ?? '';
-  const selectedFlagChannels = flagChannelId ? [flagChannelId] : [];
-  const model = (cfg.model as string) ?? 'claude-haiku-4-5';
-  const autoDelete = Boolean(cfg.autoDelete ?? true);
 
-  const handleThresholdChange = (category: string, value: number[]) => {
-    onFieldChange('thresholds', { ...thresholds, [category]: value[0] });
-  };
-
-  const handleActionChange = (category: string, value: string) => {
-    onFieldChange('actions', { ...actions, [category]: value });
-  };
-
-  const handleFlagChannelChange = (channels: string[]) => {
-    onFieldChange('flagChannelId', channels[0] ?? null);
-  };
-
-  const categories: Array<{ key: string; label: string; description: string }> = [
-    {
-      key: 'toxicity',
-      label: 'Toxicity',
-      description: 'Hateful language, slurs, extreme negativity',
-    },
-    {
-      key: 'spam',
-      label: 'Spam',
-      description: 'Repetitive content, scam links, advertisements',
-    },
-    {
-      key: 'harassment',
-      label: 'Harassment',
-      description: 'Targeted attacks, threats, bullying',
-    },
-  ];
+  const thresholds = (cfg.thresholds as Record<string, number>) ?? {};
+  const actions = (cfg.actions as Record<string, string>) ?? {};
 
   return (
     <Card>
@@ -103,122 +44,94 @@ export function AiAutoModSection({ draftConfig, saving, onFieldChange }: AiAutoM
               Use Claude AI to analyze messages and take automatic moderation actions.
             </CardDescription>
           </div>
-          <Switch
-            checked={enabled}
-            onCheckedChange={(v) => onFieldChange('enabled', v)}
+          <ToggleSwitch
+            checked={cfg.enabled ?? false}
+            onChange={(v) => onFieldChange('enabled', v)}
             disabled={saving}
-            aria-label="Toggle AI Auto-Moderation"
+            label="AI Auto-Moderation"
           />
         </div>
       </CardHeader>
-      <CardContent className="space-y-6">
-        {/* Model */}
-        <div className="space-y-2">
-          <Label htmlFor="ai-automod-model">AI Model</Label>
-          <Select
-            value={model}
-            onValueChange={(v) => onFieldChange('model', v)}
-            disabled={saving || !enabled}
-          >
-            <SelectTrigger id="ai-automod-model">
-              <SelectValue placeholder="Select model" />
-            </SelectTrigger>
-            <SelectContent>
-              {MODEL_OPTIONS.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-
-        {/* Flag channel */}
-        <div className="space-y-2">
-          <Label>Flag Review Channel</Label>
-          <p className="text-muted-foreground text-xs">
-            Flagged messages are posted here for manual review.
-          </p>
-          {guildId ? (
-            <ChannelSelector
-              guildId={guildId}
-              selected={selectedFlagChannels}
-              onChange={handleFlagChannelChange}
-              placeholder="Select review channel..."
-              disabled={saving || !enabled}
-              maxSelections={1}
-              filter="text"
-            />
-          ) : (
-            <p className="text-muted-foreground text-sm">Select a server first</p>
-          )}
-        </div>
-
-        {/* Auto-delete */}
+      <CardContent className="space-y-4">
+        <label htmlFor="ai-automod-flag-channel" className="space-y-2">
+          <span className="text-sm font-medium">Flag Review Channel ID</span>
+          <input
+            id="ai-automod-flag-channel"
+            type="text"
+            value={(cfg.flagChannelId as string) ?? ''}
+            onChange={(e) => onFieldChange('flagChannelId', e.target.value || null)}
+            disabled={saving}
+            className={inputClasses}
+            placeholder="Channel ID where flagged messages are posted"
+          />
+        </label>
         <div className="flex items-center justify-between">
-          <div>
-            <Label className="text-sm font-medium">Auto-delete flagged messages</Label>
-            <p className="text-muted-foreground text-xs">
-              Delete the offending message before taking action.
-            </p>
-          </div>
-          <Switch
-            checked={autoDelete}
-            onCheckedChange={(v) => onFieldChange('autoDelete', v)}
-            disabled={saving || !enabled}
-            aria-label="Toggle auto-delete"
+          <span className="text-sm font-medium">Auto-delete flagged messages</span>
+          <ToggleSwitch
+            checked={cfg.autoDelete ?? true}
+            onChange={(v) => onFieldChange('autoDelete', v)}
+            disabled={saving}
+            label="Auto-delete"
           />
         </div>
-
-        {/* Per-category thresholds and actions */}
-        <div className="space-y-4">
-          <Label className="text-sm font-medium">Category Thresholds &amp; Actions</Label>
+        <fieldset className="space-y-2">
+          <legend className="text-sm font-medium">Thresholds (0–100)</legend>
           <p className="text-muted-foreground text-xs">
-            Set the confidence threshold (0–100%) and action for each category.
+            Confidence threshold (%) above which the action triggers.
           </p>
-          {categories.map(({ key, label, description }) => (
-            <div key={key} className="rounded-md border p-4 space-y-3">
-              <div>
-                <p className="text-sm font-medium">{label}</p>
-                <p className="text-muted-foreground text-xs">{description}</p>
-              </div>
-              <div className="flex items-center gap-4">
-                <div className="flex-1 space-y-1">
-                  <div className="flex justify-between text-xs text-muted-foreground">
-                    <span>Threshold</span>
-                    <span>{Math.round((thresholds[key] ?? 0.7) * 100)}%</span>
-                  </div>
-                  <Slider
-                    min={0}
-                    max={1}
-                    step={0.05}
-                    value={[thresholds[key] ?? 0.7]}
-                    onValueChange={(v) => handleThresholdChange(key, v)}
-                    disabled={saving || !enabled}
-                  />
-                </div>
-                <div className="w-40">
-                  <Select
-                    value={actions[key] ?? 'flag'}
-                    onValueChange={(v) => handleActionChange(key, v)}
-                    disabled={saving || !enabled}
-                  >
-                    <SelectTrigger>
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {ACTION_OPTIONS.map((opt) => (
-                        <SelectItem key={opt.value} value={opt.value}>
-                          {opt.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-            </div>
+          {(['toxicity', 'spam', 'harassment'] as const).map((cat) => (
+            <label key={cat} htmlFor={`ai-threshold-${cat}`} className="flex items-center gap-3">
+              <span className="w-24 text-sm capitalize">{cat}</span>
+              <input
+                id={`ai-threshold-${cat}`}
+                type="number"
+                min={0}
+                max={100}
+                step={5}
+                value={decimalToPercent(thresholds[cat] ?? 0.7)}
+                onChange={(e) => {
+                  const raw = Number(e.target.value);
+                  const v = percentToDecimal(raw);
+                  onFieldChange('thresholds', {
+                    ...thresholds,
+                    [cat]: v,
+                  });
+                }}
+                disabled={saving}
+                className={`${inputClasses} w-24`}
+              />
+              <span className="text-muted-foreground text-xs">%</span>
+            </label>
           ))}
-        </div>
+        </fieldset>
+        <fieldset className="space-y-2">
+          <legend className="text-sm font-medium">Actions</legend>
+          {(['toxicity', 'spam', 'harassment'] as const).map((cat) => (
+            <label key={cat} htmlFor={`ai-action-${cat}`} className="flex items-center gap-3">
+              <span className="w-24 text-sm capitalize">{cat}</span>
+              <select
+                id={`ai-action-${cat}`}
+                value={actions[cat] ?? 'flag'}
+                onChange={(e) => {
+                  onFieldChange('actions', {
+                    ...actions,
+                    [cat]: e.target.value,
+                  });
+                }}
+                disabled={saving}
+                className={inputClasses}
+              >
+                <option value="none">No action</option>
+                <option value="delete">Delete message</option>
+                <option value="flag">Flag for review</option>
+                <option value="warn">Warn user</option>
+                <option value="timeout">Timeout user</option>
+                <option value="kick">Kick user</option>
+                <option value="ban">Ban user</option>
+              </select>
+            </label>
+          ))}
+        </fieldset>
       </CardContent>
     </Card>
   );
diff --git a/web/src/components/dashboard/config-sections/AiSection.tsx b/web/src/components/dashboard/config-sections/AiSection.tsx
index c0b271572..1e177f28d 100644
--- a/web/src/components/dashboard/config-sections/AiSection.tsx
+++ b/web/src/components/dashboard/config-sections/AiSection.tsx
@@ -1,27 +1,38 @@
 'use client';
 
 import { SystemPromptEditor } from '@/components/dashboard/system-prompt-editor';
-import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { ChannelSelector } from '@/components/ui/channel-selector';
 import type { GuildConfig } from '@/lib/config-utils';
 import { SYSTEM_PROMPT_MAX_LENGTH } from '@/types/config';
+import { ToggleSwitch } from '../toggle-switch';
 
 interface AiSectionProps {
   draftConfig: GuildConfig;
+  guildId: string;
   saving: boolean;
   onEnabledChange: (enabled: boolean) => void;
   onSystemPromptChange: (value: string) => void;
+  onBlockedChannelsChange: (channels: string[]) => void;
 }
 
+/**
+ * AI Chat configuration section.
+ *
+ * Provides controls for enabling/disabling AI chat, editing the system prompt,
+ * and selecting blocked channels where the AI will not respond.
+ */
 export function AiSection({
   draftConfig,
+  guildId,
   saving,
   onEnabledChange,
   onSystemPromptChange,
+  onBlockedChannelsChange,
 }: AiSectionProps) {
   return (
     <>
+      {/* AI section */}
       <Card>
         <CardHeader>
           <div className="flex items-center justify-between">
@@ -29,28 +40,48 @@ export function AiSection({
               <CardTitle className="text-base">AI Chat</CardTitle>
               <CardDescription>Configure the AI assistant behavior.</CardDescription>
             </div>
-            <div className="flex items-center gap-2">
-              <Switch
-                id="ai-toggle"
-                checked={draftConfig.ai?.enabled ?? false}
-                onCheckedChange={onEnabledChange}
-                disabled={saving}
-                aria-label="Toggle AI Chat"
-              />
-              <Label htmlFor="ai-toggle" className="sr-only">
-                AI Chat
-              </Label>
-            </div>
+            <ToggleSwitch
+              checked={draftConfig.ai?.enabled ?? false}
+              onChange={onEnabledChange}
+              disabled={saving}
+              label="AI Chat"
+            />
           </div>
         </CardHeader>
       </Card>
 
+      {/* System Prompt */}
       <SystemPromptEditor
         value={draftConfig.ai?.systemPrompt ?? ''}
         onChange={onSystemPromptChange}
         disabled={saving}
         maxLength={SYSTEM_PROMPT_MAX_LENGTH}
       />
+
+      {/* AI Blocked Channels */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Blocked Channels</CardTitle>
+          <CardDescription>
+            The AI will not respond in these channels (or their threads).
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          {guildId ? (
+            <ChannelSelector
+              id="ai-blocked-channels"
+              guildId={guildId}
+              selected={(draftConfig.ai?.blockedChannelIds ?? []) as string[]}
+              onChange={onBlockedChannelsChange}
+              placeholder="Select channels to block AI in..."
+              disabled={saving}
+              filter="text"
+            />
+          ) : (
+            <p className="text-muted-foreground text-sm">Select a server first</p>
+          )}
+        </CardContent>
+      </Card>
     </>
   );
 }
diff --git a/web/src/components/dashboard/config-sections/ChallengesSection.tsx b/web/src/components/dashboard/config-sections/ChallengesSection.tsx
new file mode 100644
index 000000000..bf6812900
--- /dev/null
+++ b/web/src/components/dashboard/config-sections/ChallengesSection.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import { Card, CardContent, CardTitle } from '@/components/ui/card';
+import type { GuildConfig } from '@/lib/config-utils';
+import { ToggleSwitch } from '../toggle-switch';
+
+interface ChallengesSectionProps {
+  draftConfig: GuildConfig;
+  saving: boolean;
+  onEnabledChange: (enabled: boolean) => void;
+  onFieldChange: (field: string, value: unknown) => void;
+}
+
+/** Shared input styling for text inputs. */
+const inputClasses =
+  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+
+/**
+ * Daily Coding Challenges configuration section.
+ *
+ * Provides controls for auto-posting daily coding challenges with hint and solve tracking.
+ */
+export function ChallengesSection({
+  draftConfig,
+  saving,
+  onEnabledChange,
+  onFieldChange,
+}: ChallengesSectionProps) {
+  return (
+    <Card>
+      <CardContent className="space-y-4 pt-6">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">Daily Coding Challenges</CardTitle>
+          <ToggleSwitch
+            checked={draftConfig.challenges?.enabled ?? false}
+            onChange={onEnabledChange}
+            disabled={saving}
+            label="Challenges"
+          />
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Auto-post a daily coding challenge with hint and solve tracking.
+        </p>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <label htmlFor="challenge-channel-id" className="space-y-2">
+            <span className="text-sm font-medium">Challenge Channel ID</span>
+            <input
+              id="challenge-channel-id"
+              type="text"
+              value={draftConfig.challenges?.channelId ?? ''}
+              onChange={(e) => onFieldChange('channelId', e.target.value.trim() || null)}
+              disabled={saving}
+              className={inputClasses}
+              placeholder="Channel ID for daily challenges"
+            />
+          </label>
+          <label htmlFor="post-time-hh-mm" className="space-y-2">
+            <span className="text-sm font-medium">Post Time (HH:MM)</span>
+            <input
+              id="post-time-hh-mm"
+              type="text"
+              value={draftConfig.challenges?.postTime ?? '09:00'}
+              onChange={(e) => onFieldChange('postTime', e.target.value)}
+              disabled={saving}
+              className={inputClasses}
+              placeholder="09:00"
+            />
+          </label>
+          <label className="space-y-2 col-span-2">
+            <span className="text-sm font-medium">Timezone</span>
+            <input
+              type="text"
+              value={draftConfig.challenges?.timezone ?? 'America/New_York'}
+              onChange={(e) => onFieldChange('timezone', e.target.value)}
+              disabled={saving}
+              className={inputClasses}
+              placeholder="America/New_York"
+            />
+            <p className="text-xs text-muted-foreground">
+              IANA timezone (e.g. America/Chicago, Europe/London)
+            </p>
+          </label>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/dashboard/config-sections/CommunityFeaturesSection.tsx b/web/src/components/dashboard/config-sections/CommunityFeaturesSection.tsx
new file mode 100644
index 000000000..e66fad80f
--- /dev/null
+++ b/web/src/components/dashboard/config-sections/CommunityFeaturesSection.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import { Card, CardContent, CardTitle } from '@/components/ui/card';
+import type { GuildConfig } from '@/lib/config-utils';
+import { ToggleSwitch } from '../toggle-switch';
+
+interface CommunityFeaturesSectionProps {
+  draftConfig: GuildConfig;
+  saving: boolean;
+  onToggleChange: (key: string, enabled: boolean) => void;
+}
+
+const COMMUNITY_FEATURES = [
+  { key: 'help', label: 'Help / FAQ', desc: '/help command for server knowledge base' },
+  { key: 'announce', label: 'Announcements', desc: '/announce for scheduled messages' },
+  { key: 'snippet', label: 'Code Snippets', desc: '/snippet for saving and sharing code' },
+  { key: 'poll', label: 'Polls', desc: '/poll for community voting' },
+  {
+    key: 'showcase',
+    label: 'Project Showcase',
+    desc: '/showcase to submit, browse, and upvote projects',
+  },
+  {
+    key: 'review',
+    label: 'Code Reviews',
+    desc: '/review peer code review requests with claim workflow',
+  },
+  { key: 'tldr', label: 'TL;DR Summaries', desc: '/tldr for AI channel summaries' },
+  { key: 'afk', label: 'AFK System', desc: '/afk auto-respond when members are away' },
+  {
+    key: 'engagement',
+    label: 'Engagement Tracking',
+    desc: '/profile stats — messages, reactions, days active',
+  },
+] as const;
+
+/**
+ * Community Features configuration section.
+ *
+ * Provides toggles for enabling/disabling various community commands per guild.
+ */
+export function CommunityFeaturesSection({
+  draftConfig,
+  saving,
+  onToggleChange,
+}: CommunityFeaturesSectionProps) {
+  return (
+    <Card>
+      <CardContent className="space-y-4 pt-6">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">Community Features</CardTitle>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Enable or disable community commands per guild.
+        </p>
+        {COMMUNITY_FEATURES.map(({ key, label, desc }) => (
+          <div key={key} className="flex items-center justify-between">
+            <div>
+              <span className="text-sm font-medium">{label}</span>
+              <p className="text-xs text-muted-foreground">{desc}</p>
+            </div>
+            <ToggleSwitch
+              checked={
+                (draftConfig[key as keyof GuildConfig] as { enabled?: boolean } | undefined)
+                  ?.enabled ?? false
+              }
+              onChange={(v) => onToggleChange(key, v)}
+              disabled={saving}
+              label={label}
+            />
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/dashboard/config-sections/EngagementSection.tsx b/web/src/components/dashboard/config-sections/EngagementSection.tsx
new file mode 100644
index 000000000..a3f2fe71a
--- /dev/null
+++ b/web/src/components/dashboard/config-sections/EngagementSection.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import type { GuildConfig } from '@/lib/config-utils';
+
+interface EngagementSectionProps {
+  draftConfig: GuildConfig;
+  saving: boolean;
+  onActivityBadgesChange: (badges: Array<{ days?: number; label?: string }>) => void;
+}
+
+const DEFAULT_ACTIVITY_BADGES = [
+  { days: 90, label: '👑 Legend' },
+  { days: 30, label: '🌳 Veteran' },
+  { days: 7, label: '🌿 Regular' },
+  { days: 0, label: '🌱 Newcomer' },
+] as const;
+
+/**
+ * Engagement / Activity Badges configuration section.
+ *
+ * Provides controls for configuring badge tiers shown on /profile.
+ */
+export function EngagementSection({
+  draftConfig,
+  saving,
+  onActivityBadgesChange,
+}: EngagementSectionProps) {
+  const badges = draftConfig.engagement?.activityBadges ?? [...DEFAULT_ACTIVITY_BADGES];
+
+  return (
+    <Card>
+      <CardContent className="space-y-4 pt-6">
+        <CardTitle className="text-base">Activity Badges</CardTitle>
+        <p className="text-xs text-muted-foreground">
+          Configure the badge tiers shown on /profile. Each badge requires a minimum number of
+          active days.
+        </p>
+        {badges.map((badge, i) => (
+          <div key={`badge-row-${i}`} className="flex items-center gap-2">
+            <Input
+              className="w-20"
+              type="number"
+              min={0}
+              value={badge.days ?? 0}
+              onChange={(e) => {
+                const newBadges = [...badges];
+                newBadges[i] = {
+                  ...newBadges[i],
+                  days: Math.max(0, parseInt(e.target.value, 10) || 0),
+                };
+                onActivityBadgesChange(newBadges);
+              }}
+              disabled={saving}
+            />
+            <span className="text-xs text-muted-foreground">days →</span>
+            <Input
+              className="flex-1"
+              value={badge.label ?? ''}
+              onChange={(e) => {
+                const newBadges = [...badges];
+                newBadges[i] = { ...newBadges[i], label: e.target.value };
+                onActivityBadgesChange(newBadges);
+              }}
+              disabled={saving}
+            />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                const newBadges = badges.filter((_, idx) => idx !== i);
+                onActivityBadgesChange(newBadges);
+              }}
+              disabled={saving || badges.length <= 1}
+            >
+              ✕
+            </Button>
+          </div>
+        ))}
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => {
+            const newBadges = [...badges, { days: 0, label: '🌟 New Badge' }];
+            onActivityBadgesChange(newBadges);
+          }}
+          disabled={saving}
+        >
+          + Add Badge
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/dashboard/config-sections/GitHubSection.tsx b/web/src/components/dashboard/config-sections/GitHubSection.tsx
new file mode 100644
index 000000000..bc1e64318
--- /dev/null
+++ b/web/src/components/dashboard/config-sections/GitHubSection.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { Card, CardContent, CardTitle } from '@/components/ui/card';
+import { parseNumberInput } from '@/lib/config-normalization';
+import type { GuildConfig } from '@/lib/config-utils';
+import { ToggleSwitch } from '../toggle-switch';
+
+interface GitHubSectionProps {
+  draftConfig: GuildConfig;
+  saving: boolean;
+  onFieldChange: (field: string, value: unknown) => void;
+}
+
+/** Shared input styling for text inputs. */
+const inputClasses =
+  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+
+/**
+ * GitHub Activity Feed configuration section.
+ *
+ * Provides controls for GitHub feed channel and polling interval.
+ */
+export function GitHubSection({ draftConfig, saving, onFieldChange }: GitHubSectionProps) {
+  const feed = draftConfig.github?.feed ?? {};
+
+  return (
+    <Card>
+      <CardContent className="space-y-4 pt-6">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">GitHub Activity Feed</CardTitle>
+          <ToggleSwitch
+            checked={feed.enabled ?? false}
+            onChange={(v) => onFieldChange('enabled', v)}
+            disabled={saving}
+            label="GitHub Feed"
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <label htmlFor="feed-channel-id" className="space-y-2">
+            <span className="text-sm font-medium">Feed Channel ID</span>
+            <input
+              id="feed-channel-id"
+              type="text"
+              value={feed.channelId ?? ''}
+              onChange={(e) => onFieldChange('channelId', e.target.value.trim() || null)}
+              disabled={saving}
+              className={inputClasses}
+              placeholder="Channel ID for GitHub updates"
+            />
+          </label>
+          <label htmlFor="poll-interval-minutes" className="space-y-2">
+            <span className="text-sm font-medium">Poll Interval (minutes)</span>
+            <input
+              id="poll-interval-minutes"
+              type="number"
+              min={1}
+              value={feed.pollIntervalMinutes ?? 5}
+              onChange={(e) => {
+                const num = parseNumberInput(e.target.value, 1);
+                if (num !== undefined) onFieldChange('pollIntervalMinutes', num);
+              }}
+              disabled={saving}
+              className={inputClasses}
+            />
+          </label>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/dashboard/config-sections/MemorySection.tsx b/web/src/components/dashboard/config-sections/MemorySection.tsx
new file mode 100644
index 000000000..6a359778f
--- /dev/null
+++ b/web/src/components/dashboard/config-sections/MemorySection.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { parseNumberInput } from '@/lib/config-normalization';
+import type { GuildConfig } from '@/lib/config-utils';
+import { ToggleSwitch } from '../toggle-switch';
+
+interface MemorySectionProps {
+  draftConfig: GuildConfig;
+  saving: boolean;
+  onEnabledChange: (enabled: boolean) => void;
+  onFieldChange: (field: string, value: unknown) => void;
+}
+
+/** Shared input styling for text inputs. */
+const inputClasses =
+  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+
+/**
+ * Memory configuration section.
+ *
+ * Provides controls for AI context memory and auto-extraction settings.
+ */
+export function MemorySection({
+  draftConfig,
+  saving,
+  onEnabledChange,
+  onFieldChange,
+}: MemorySectionProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-base">Memory</CardTitle>
+            <CardDescription>Configure AI context memory and auto-extraction.</CardDescription>
+          </div>
+          <ToggleSwitch
+            checked={draftConfig.memory?.enabled ?? false}
+            onChange={onEnabledChange}
+            disabled={saving}
+            label="Memory"
+          />
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <label htmlFor="max-context-memories" className="space-y-2">
+          <span className="text-sm font-medium">Max Context Memories</span>
+          <input
+            id="max-context-memories"
+            type="number"
+            min={1}
+            value={draftConfig.memory?.maxContextMemories ?? 10}
+            onChange={(e) => {
+              const num = parseNumberInput(e.target.value, 1);
+              if (num !== undefined) onFieldChange('maxContextMemories', num);
+            }}
+            disabled={saving}
+            className={inputClasses}
+          />
+        </label>
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium">Auto-Extract</span>
+          <ToggleSwitch
+            checked={draftConfig.memory?.autoExtract ?? false}
+            onChange={(v) => onFieldChange('autoExtract', v)}
+            disabled={saving}
+            label="Auto-Extract"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/dashboard/config-sections/ModerationSection.tsx b/web/src/components/dashboard/config-sections/ModerationSection.tsx
index a3cfd9947..78e898148 100644
--- a/web/src/components/dashboard/config-sections/ModerationSection.tsx
+++ b/web/src/components/dashboard/config-sections/ModerationSection.tsx
@@ -1,45 +1,63 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { ChannelSelector } from '@/components/ui/channel-selector';
-import { Label } from '@/components/ui/label';
-import { RoleSelector } from '@/components/ui/role-selector';
-import { Switch } from '@/components/ui/switch';
-import { useGuildSelection } from '@/hooks/use-guild-selection';
+import { Input } from '@/components/ui/input';
+import { parseNumberInput } from '@/lib/config-normalization';
 import type { GuildConfig } from '@/lib/config-utils';
+import { ToggleSwitch } from '../toggle-switch';
 
 interface ModerationSectionProps {
   draftConfig: GuildConfig;
+  guildId: string;
   saving: boolean;
+  protectRoleIdsRaw: string;
   onEnabledChange: (enabled: boolean) => void;
   onFieldChange: (field: string, value: unknown) => void;
   onDmNotificationChange: (action: string, value: boolean) => void;
   onEscalationChange: (enabled: boolean) => void;
+  onRateLimitChange: (field: string, value: unknown) => void;
+  onLinkFilterChange: (field: string, value: unknown) => void;
   onProtectRolesChange: (field: string, value: unknown) => void;
+  onProtectRoleIdsRawChange: (value: string) => void;
 }
 
+/** Shared input styling for text inputs. */
+const inputClasses =
+  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+
 /**
- * Render the Moderation settings section, including alert channel selection, auto-delete,
- * DM notification toggles, and escalation controls.
+ * Moderation configuration section.
  *
- * @param draftConfig - The current draft guild configuration containing moderation settings.
- * @param saving - Whether a save operation is in progress; when true, interactive controls are disabled.
- * @param onEnabledChange - Callback invoked with the new enabled state when moderation is toggled.
- * @param onFieldChange - Generic field update callback, called with field name and new value (e.g., 'alertChannelId', 'autoDelete').
- * @param onDmNotificationChange - Callback invoked with an action ('warn' | 'timeout' | 'kick' | 'ban') and boolean to toggle DM notifications for that action.
- * @param onEscalationChange - Callback invoked with the new escalation enabled state.
- * @returns The rendered moderation Card element, or `null` if `draftConfig.moderation` is not present.
+ * Provides controls for moderation settings including alert channels,
+ * auto-delete, DM notifications, escalation, rate limiting, link filtering,
+ * and protected roles.
  */
 export function ModerationSection({
   draftConfig,
+  guildId,
   saving,
+  protectRoleIdsRaw,
   onEnabledChange,
   onFieldChange,
   onDmNotificationChange,
   onEscalationChange,
+  onRateLimitChange,
+  onLinkFilterChange,
   onProtectRolesChange,
+  onProtectRoleIdsRawChange,
 }: ModerationSectionProps) {
-  const guildId = useGuildSelection();
+  // Local state for blocked domains raw input (parsed on blur)
+  // Must be before early return to satisfy React hooks rules
+  const blockedDomainsDisplay = (draftConfig.moderation?.linkFilter?.blockedDomains ?? []).join(
+    ', ',
+  );
+  const [blockedDomainsRaw, setBlockedDomainsRaw] = useState(blockedDomainsDisplay);
+  useEffect(() => {
+    setBlockedDomainsRaw(blockedDomainsDisplay);
+  }, [blockedDomainsDisplay]);
+
   if (!draftConfig.moderation) return null;
 
   const alertChannelId = draftConfig.moderation?.alertChannelId ?? '';
@@ -59,17 +77,17 @@ export function ModerationSection({
               Configure moderation, escalation, and logging settings.
             </CardDescription>
           </div>
-          <Switch
+          <ToggleSwitch
             checked={draftConfig.moderation?.enabled ?? false}
-            onCheckedChange={onEnabledChange}
+            onChange={onEnabledChange}
             disabled={saving}
-            aria-label="Toggle Moderation"
+            label="Moderation"
           />
         </div>
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="space-y-2">
-          <Label htmlFor={guildId ? 'alert-channel' : undefined}>Alert Channel</Label>
+          <span className="text-sm font-medium">Alert Channel</span>
           {guildId ? (
             <ChannelSelector
               id="alert-channel"
@@ -86,117 +104,235 @@ export function ModerationSection({
           )}
         </div>
         <div className="flex items-center justify-between">
-          <Label htmlFor="auto-delete" className="text-sm font-medium">
-            Auto-delete flagged messages
-          </Label>
-          <Switch
-            id="auto-delete"
+          <span className="text-sm font-medium">Auto-delete flagged messages</span>
+          <ToggleSwitch
             checked={draftConfig.moderation?.autoDelete ?? false}
-            onCheckedChange={(v) => onFieldChange('autoDelete', v)}
+            onChange={(v) => onFieldChange('autoDelete', v)}
             disabled={saving}
-            aria-label="Toggle auto-delete"
+            label="Auto Delete"
           />
         </div>
         <fieldset className="space-y-2">
           <legend className="text-sm font-medium">DM Notifications</legend>
           {(['warn', 'timeout', 'kick', 'ban'] as const).map((action) => (
             <div key={action} className="flex items-center justify-between">
-              <Label htmlFor={`dm-${action}`} className="text-sm capitalize text-muted-foreground">
-                {action}
-              </Label>
-              <Switch
-                id={`dm-${action}`}
+              <span className="text-sm capitalize text-muted-foreground">{action}</span>
+              <ToggleSwitch
                 checked={draftConfig.moderation?.dmNotifications?.[action] ?? false}
-                onCheckedChange={(v) => onDmNotificationChange(action, v)}
+                onChange={(v) => onDmNotificationChange(action, v)}
                 disabled={saving}
-                aria-label={`DM on ${action}`}
+                label={`DM on ${action}`}
               />
             </div>
           ))}
         </fieldset>
         <div className="flex items-center justify-between">
-          <Label htmlFor="escalation" className="text-sm font-medium">
-            Escalation Enabled
-          </Label>
-          <Switch
-            id="escalation"
+          <span className="text-sm font-medium">Escalation Enabled</span>
+          <ToggleSwitch
             checked={draftConfig.moderation?.escalation?.enabled ?? false}
-            onCheckedChange={(v) => onEscalationChange(v)}
+            onChange={(v) => onEscalationChange(v)}
             disabled={saving}
-            aria-label="Toggle escalation"
+            label="Escalation"
           />
         </div>
 
+        {/* Rate Limiting sub-section */}
+        <fieldset className="space-y-2">
+          <legend className="text-sm font-medium">Rate Limiting</legend>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">Enabled</span>
+            <ToggleSwitch
+              checked={draftConfig.moderation?.rateLimit?.enabled ?? false}
+              onChange={(v) => onRateLimitChange('enabled', v)}
+              disabled={saving}
+              label="Rate Limiting"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <label htmlFor="max-messages" className="space-y-2">
+              <span className="text-sm text-muted-foreground">Max Messages</span>
+              <input
+                id="max-messages"
+                type="number"
+                min={1}
+                value={draftConfig.moderation?.rateLimit?.maxMessages ?? 10}
+                onChange={(e) => {
+                  const num = parseNumberInput(e.target.value, 1);
+                  if (num !== undefined) onRateLimitChange('maxMessages', num);
+                }}
+                disabled={saving}
+                className={inputClasses}
+              />
+            </label>
+            <label htmlFor="window-seconds" className="space-y-2">
+              <span className="text-sm text-muted-foreground">Window (seconds)</span>
+              <input
+                id="window-seconds"
+                type="number"
+                min={1}
+                value={draftConfig.moderation?.rateLimit?.windowSeconds ?? 10}
+                onChange={(e) => {
+                  const num = parseNumberInput(e.target.value, 1);
+                  if (num !== undefined) onRateLimitChange('windowSeconds', num);
+                }}
+                disabled={saving}
+                className={inputClasses}
+              />
+            </label>
+          </div>
+          <div className="grid grid-cols-3 gap-4">
+            <label htmlFor="mute-after-triggers" className="space-y-2">
+              <span className="text-sm text-muted-foreground">Mute After Triggers</span>
+              <input
+                id="mute-after-triggers"
+                type="number"
+                min={1}
+                value={draftConfig.moderation?.rateLimit?.muteAfterTriggers ?? 3}
+                onChange={(e) => {
+                  const num = parseNumberInput(e.target.value, 1);
+                  if (num !== undefined) onRateLimitChange('muteAfterTriggers', num);
+                }}
+                disabled={saving}
+                className={inputClasses}
+              />
+            </label>
+            <label htmlFor="mute-window-s" className="space-y-2">
+              <span className="text-sm text-muted-foreground">Mute Window (s)</span>
+              <input
+                id="mute-window-s"
+                type="number"
+                min={1}
+                value={draftConfig.moderation?.rateLimit?.muteWindowSeconds ?? 300}
+                onChange={(e) => {
+                  const num = parseNumberInput(e.target.value, 1);
+                  if (num !== undefined) onRateLimitChange('muteWindowSeconds', num);
+                }}
+                disabled={saving}
+                className={inputClasses}
+              />
+            </label>
+            <label htmlFor="mute-duration-s" className="space-y-2">
+              <span className="text-sm text-muted-foreground">Mute Duration (s)</span>
+              <input
+                id="mute-duration-s"
+                type="number"
+                min={1}
+                value={draftConfig.moderation?.rateLimit?.muteDurationSeconds ?? 300}
+                onChange={(e) => {
+                  const num = parseNumberInput(e.target.value, 1);
+                  if (num !== undefined) onRateLimitChange('muteDurationSeconds', num);
+                }}
+                disabled={saving}
+                className={inputClasses}
+              />
+            </label>
+          </div>
+        </fieldset>
+
+        {/* Link Filtering sub-section */}
+        <fieldset className="space-y-2">
+          <legend className="text-sm font-medium">Link Filtering</legend>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">Enabled</span>
+            <ToggleSwitch
+              checked={draftConfig.moderation?.linkFilter?.enabled ?? false}
+              onChange={(v) => onLinkFilterChange('enabled', v)}
+              disabled={saving}
+              label="Link Filtering"
+            />
+          </div>
+          <label htmlFor="blocked-domains" className="space-y-2">
+            <span className="text-sm text-muted-foreground">Blocked Domains</span>
+            <input
+              id="blocked-domains"
+              type="text"
+              value={blockedDomainsRaw}
+              onChange={(e) => setBlockedDomainsRaw(e.target.value)}
+              onBlur={() =>
+                onLinkFilterChange(
+                  'blockedDomains',
+                  blockedDomainsRaw
+                    .split(',')
+                    .map((s) => s.trim())
+                    .filter(Boolean),
+                )
+              }
+              disabled={saving}
+              className={inputClasses}
+              placeholder="example.com, spam.net"
+            />
+          </label>
+        </fieldset>
+
         {/* Protect Roles sub-section */}
         <fieldset className="space-y-2">
           <legend className="text-sm font-medium">Protect Roles from Moderation</legend>
           <div className="flex items-center justify-between">
-            <Label htmlFor="protect-roles-enabled" className="text-sm text-muted-foreground">
-              Enabled
-            </Label>
-            <Switch
-              id="protect-roles-enabled"
+            <span className="text-sm text-muted-foreground">Enabled</span>
+            <ToggleSwitch
               checked={draftConfig.moderation?.protectRoles?.enabled ?? true}
-              onCheckedChange={(v) => onProtectRolesChange('enabled', v)}
+              onChange={(v) => onProtectRolesChange('enabled', v)}
               disabled={saving}
-              aria-label="Toggle protect roles"
+              label="Protect Roles"
             />
           </div>
           <div className="flex items-center justify-between">
-            <Label htmlFor="protect-admins" className="text-sm text-muted-foreground">
-              Include admins
-            </Label>
-            <Switch
-              id="protect-admins"
+            <span className="text-sm text-muted-foreground">Include admins</span>
+            <ToggleSwitch
               checked={draftConfig.moderation?.protectRoles?.includeAdmins ?? true}
-              onCheckedChange={(v) => onProtectRolesChange('includeAdmins', v)}
+              onChange={(v) => onProtectRolesChange('includeAdmins', v)}
               disabled={saving}
-              aria-label="Include admins"
+              label="Include admins"
             />
           </div>
           <div className="flex items-center justify-between">
-            <Label htmlFor="protect-mods" className="text-sm text-muted-foreground">
-              Include moderators
-            </Label>
-            <Switch
-              id="protect-mods"
+            <span className="text-sm text-muted-foreground">Include moderators</span>
+            <ToggleSwitch
               checked={draftConfig.moderation?.protectRoles?.includeModerators ?? true}
-              onCheckedChange={(v) => onProtectRolesChange('includeModerators', v)}
+              onChange={(v) => onProtectRolesChange('includeModerators', v)}
               disabled={saving}
-              aria-label="Include moderators"
+              label="Include moderators"
             />
           </div>
           <div className="flex items-center justify-between">
-            <Label htmlFor="protect-owner" className="text-sm text-muted-foreground">
-              Include server owner
-            </Label>
-            <Switch
-              id="protect-owner"
+            <span className="text-sm text-muted-foreground">Include server owner</span>
+            <ToggleSwitch
               checked={draftConfig.moderation?.protectRoles?.includeServerOwner ?? true}
-              onCheckedChange={(v) => onProtectRolesChange('includeServerOwner', v)}
+              onChange={(v) => onProtectRolesChange('includeServerOwner', v)}
               disabled={saving}
-              aria-label="Include server owner"
+              label="Include server owner"
             />
           </div>
           <div className="space-y-2">
-            <Label
-              htmlFor={guildId ? 'protect-role-ids' : undefined}
-              className="text-sm text-muted-foreground"
-            >
-              Additional protected roles
-            </Label>
-            {guildId ? (
-              <RoleSelector
-                id="protect-role-ids"
-                guildId={guildId}
-                selected={draftConfig.moderation?.protectRoles?.roleIds ?? []}
-                onChange={(selected) => onProtectRolesChange('roleIds', selected)}
-                disabled={saving}
-                placeholder="Select additional protected roles..."
-              />
-            ) : (
-              <p className="text-muted-foreground text-sm">Select a server first</p>
-            )}
+            <span className="text-sm text-muted-foreground">
+              Additional protected role IDs (comma-separated)
+            </span>
+            <Input
+              type="text"
+              value={protectRoleIdsRaw}
+              onChange={(e) => {
+                const raw = e.target.value;
+                onProtectRoleIdsRawChange(raw);
+                onProtectRolesChange(
+                  'roleIds',
+                  raw
+                    .split(',')
+                    .map((s) => s.trim())
+                    .filter(Boolean),
+                );
+              }}
+              onBlur={(e) =>
+                onProtectRoleIdsRawChange(
+                  e.target.value
+                    .split(',')
+                    .map((s) => s.trim())
+                    .filter(Boolean)
+                    .join(', '),
+                )
+              }
+              disabled={saving}
+              placeholder="Role ID 1, Role ID 2"
+            />
           </div>
         </fieldset>
       </CardContent>
diff --git a/web/src/components/dashboard/config-sections/PermissionsSection.tsx b/web/src/components/dashboard/config-sections/PermissionsSection.tsx
new file mode 100644
index 000000000..617b876a8
--- /dev/null
+++ b/web/src/components/dashboard/config-sections/PermissionsSection.tsx
@@ -0,0 +1,109 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { RoleSelector } from '@/components/ui/role-selector';
+import type { GuildConfig } from '@/lib/config-utils';
+import { ToggleSwitch } from '../toggle-switch';
+
+interface PermissionsSectionProps {
+  draftConfig: GuildConfig;
+  guildId: string;
+  saving: boolean;
+  onFieldChange: (field: string, value: unknown) => void;
+}
+
+/** Shared input styling for text inputs. */
+const inputClasses =
+  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+
+/**
+ * Permissions configuration section.
+ *
+ * Provides controls for role-based access and bot owner overrides.
+ */
+export function PermissionsSection({
+  draftConfig,
+  guildId,
+  saving,
+  onFieldChange,
+}: PermissionsSectionProps) {
+  // Local state for bot owners raw input (parsed on blur)
+  const botOwnersDisplay = (draftConfig.permissions?.botOwners ?? []).join(', ');
+  const [botOwnersRaw, setBotOwnersRaw] = useState(botOwnersDisplay);
+  useEffect(() => {
+    setBotOwnersRaw(botOwnersDisplay);
+  }, [botOwnersDisplay]);
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-base">Permissions</CardTitle>
+            <CardDescription>Configure role-based access and bot owner overrides.</CardDescription>
+          </div>
+          <ToggleSwitch
+            checked={draftConfig.permissions?.enabled ?? false}
+            onChange={(v) => onFieldChange('enabled', v)}
+            disabled={saving}
+            label="Permissions"
+          />
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <span className="text-sm font-medium">Admin Role</span>
+          <RoleSelector
+            id="admin-role-id"
+            guildId={guildId}
+            selected={
+              draftConfig.permissions?.adminRoleId ? [draftConfig.permissions.adminRoleId] : []
+            }
+            onChange={(selected) => onFieldChange('adminRoleId', selected[0] ?? null)}
+            placeholder="Select admin role"
+            disabled={saving}
+            maxSelections={1}
+          />
+        </div>
+        <div className="space-y-2">
+          <span className="text-sm font-medium">Moderator Role</span>
+          <RoleSelector
+            id="moderator-role-id"
+            guildId={guildId}
+            selected={
+              draftConfig.permissions?.moderatorRoleId
+                ? [draftConfig.permissions.moderatorRoleId]
+                : []
+            }
+            onChange={(selected) => onFieldChange('moderatorRoleId', selected[0] ?? null)}
+            placeholder="Select moderator role"
+            disabled={saving}
+            maxSelections={1}
+          />
+        </div>
+        <label htmlFor="bot-owners" className="space-y-2">
+          <span className="text-sm font-medium">Bot Owners</span>
+          <input
+            id="bot-owners"
+            type="text"
+            value={botOwnersRaw}
+            onChange={(e) => setBotOwnersRaw(e.target.value)}
+            onBlur={() =>
+              onFieldChange(
+                'botOwners',
+                botOwnersRaw
+                  .split(',')
+                  .map((s) => s.trim())
+                  .filter(Boolean),
+              )
+            }
+            disabled={saving}
+            className={inputClasses}
+            placeholder="Comma-separated user IDs"
+          />
+        </label>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/dashboard/config-sections/ReputationSection.tsx b/web/src/components/dashboard/config-sections/ReputationSection.tsx
new file mode 100644
index 000000000..ca7bc44af
--- /dev/null
+++ b/web/src/components/dashboard/config-sections/ReputationSection.tsx
@@ -0,0 +1,150 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Card, CardContent, CardTitle } from '@/components/ui/card';
+import { parseNumberInput } from '@/lib/config-normalization';
+import type { GuildConfig } from '@/lib/config-utils';
+import { ToggleSwitch } from '../toggle-switch';
+
+interface ReputationSectionProps {
+  draftConfig: GuildConfig;
+  saving: boolean;
+  onEnabledChange: (enabled: boolean) => void;
+  onFieldChange: (field: string, value: unknown) => void;
+}
+
+/** Shared input styling for text inputs. */
+const inputClasses =
+  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+
+const DEFAULT_LEVEL_THRESHOLDS = [100, 300, 600, 1000, 1500, 2500, 4000, 6000, 8500, 12000];
+
+/**
+ * Reputation / XP configuration section.
+ *
+ * Provides controls for XP settings, cooldowns, level thresholds, and announcements.
+ */
+export function ReputationSection({
+  draftConfig,
+  saving,
+  onEnabledChange,
+  onFieldChange,
+}: ReputationSectionProps) {
+  const xpRange = draftConfig.reputation?.xpPerMessage ?? [5, 15];
+  const levelThresholds = draftConfig.reputation?.levelThresholds ?? DEFAULT_LEVEL_THRESHOLDS;
+
+  // Local state for level thresholds raw input (parsed on blur)
+  const thresholdsDisplay = levelThresholds.join(', ');
+  const [thresholdsRaw, setThresholdsRaw] = useState(thresholdsDisplay);
+  useEffect(() => {
+    setThresholdsRaw(thresholdsDisplay);
+  }, [thresholdsDisplay]);
+
+  return (
+    <Card>
+      <CardContent className="space-y-4 pt-6">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">Reputation / XP</CardTitle>
+          <ToggleSwitch
+            checked={draftConfig.reputation?.enabled ?? false}
+            onChange={onEnabledChange}
+            disabled={saving}
+            label="Reputation"
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <label htmlFor="xp-per-message-min" className="space-y-2">
+            <span className="text-sm font-medium">XP per Message (min)</span>
+            <input
+              id="xp-per-message-min"
+              type="number"
+              min={1}
+              max={100}
+              value={xpRange[0] ?? 5}
+              onChange={(e) => {
+                const num = parseNumberInput(e.target.value, 1, 100);
+                if (num !== undefined) {
+                  const newMax = num > (xpRange[1] ?? 15) ? num : (xpRange[1] ?? 15);
+                  onFieldChange('xpPerMessage', [num, newMax]);
+                }
+              }}
+              disabled={saving}
+              className={inputClasses}
+            />
+          </label>
+          <label htmlFor="xp-per-message-max" className="space-y-2">
+            <span className="text-sm font-medium">XP per Message (max)</span>
+            <input
+              id="xp-per-message-max"
+              type="number"
+              min={1}
+              max={100}
+              value={xpRange[1] ?? 15}
+              onChange={(e) => {
+                const num = parseNumberInput(e.target.value, 1, 100);
+                if (num !== undefined) {
+                  const newMin = num < (xpRange[0] ?? 5) ? num : (xpRange[0] ?? 5);
+                  onFieldChange('xpPerMessage', [newMin, num]);
+                }
+              }}
+              disabled={saving}
+              className={inputClasses}
+            />
+          </label>
+          <label htmlFor="xp-cooldown-seconds" className="space-y-2">
+            <span className="text-sm font-medium">XP Cooldown (seconds)</span>
+            <input
+              id="xp-cooldown-seconds"
+              type="number"
+              min={0}
+              value={draftConfig.reputation?.xpCooldownSeconds ?? 60}
+              onChange={(e) => {
+                const num = parseNumberInput(e.target.value, 0);
+                if (num !== undefined) onFieldChange('xpCooldownSeconds', num);
+              }}
+              disabled={saving}
+              className={inputClasses}
+            />
+          </label>
+          <label htmlFor="announce-channel-id" className="space-y-2">
+            <span className="text-sm font-medium">Announce Channel ID</span>
+            <input
+              id="announce-channel-id"
+              type="text"
+              value={draftConfig.reputation?.announceChannelId ?? ''}
+              onChange={(e) => onFieldChange('announceChannelId', e.target.value.trim() || null)}
+              disabled={saving}
+              className={inputClasses}
+              placeholder="Channel ID for level-up announcements"
+            />
+          </label>
+        </div>
+        <label htmlFor="level-thresholds-comma-separated" className="space-y-2">
+          <span className="text-sm font-medium">Level Thresholds (comma-separated XP values)</span>
+          <input
+            id="level-thresholds-comma-separated"
+            type="text"
+            value={thresholdsRaw}
+            onChange={(e) => setThresholdsRaw(e.target.value)}
+            onBlur={() => {
+              const nums = thresholdsRaw
+                .split(',')
+                .map((s) => Number(s.trim()))
+                .filter((n) => Number.isFinite(n) && n > 0);
+              if (nums.length > 0) {
+                const sorted = [...nums].sort((a, b) => a - b);
+                onFieldChange('levelThresholds', sorted);
+              }
+            }}
+            disabled={saving}
+            className={inputClasses}
+            placeholder="100, 300, 600, 1000, ..."
+          />
+          <p className="text-xs text-muted-foreground">
+            XP required for each level (L1, L2, L3, ...). Add more values for more levels.
+          </p>
+        </label>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/dashboard/config-sections/StarboardSection.tsx b/web/src/components/dashboard/config-sections/StarboardSection.tsx
new file mode 100644
index 000000000..a20298bb8
--- /dev/null
+++ b/web/src/components/dashboard/config-sections/StarboardSection.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { parseNumberInput } from '@/lib/config-normalization';
+import type { GuildConfig } from '@/lib/config-utils';
+import { ToggleSwitch } from '../toggle-switch';
+
+interface StarboardSectionProps {
+  draftConfig: GuildConfig;
+  saving: boolean;
+  onFieldChange: (field: string, value: unknown) => void;
+}
+
+/** Shared input styling for text inputs. */
+const inputClasses =
+  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+
+/**
+ * Starboard configuration section.
+ *
+ * Provides controls for pinning popular messages to a starboard channel,
+ * including threshold, emoji settings, and ignored channels.
+ */
+export function StarboardSection({ draftConfig, saving, onFieldChange }: StarboardSectionProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-base">Starboard</CardTitle>
+            <CardDescription>Pin popular messages to a starboard channel.</CardDescription>
+          </div>
+          <ToggleSwitch
+            checked={draftConfig.starboard?.enabled ?? false}
+            onChange={(v) => onFieldChange('enabled', v)}
+            disabled={saving}
+            label="Starboard"
+          />
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <label htmlFor="channel-id" className="space-y-2">
+          <span className="text-sm font-medium">Channel ID</span>
+          <input
+            id="channel-id"
+            type="text"
+            value={draftConfig.starboard?.channelId ?? ''}
+            onChange={(e) => onFieldChange('channelId', e.target.value)}
+            disabled={saving}
+            className={inputClasses}
+            placeholder="Starboard channel ID"
+          />
+        </label>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <label htmlFor="threshold" className="space-y-2">
+            <span className="text-sm font-medium">Threshold</span>
+            <input
+              id="threshold"
+              type="number"
+              min={1}
+              value={draftConfig.starboard?.threshold ?? 3}
+              onChange={(e) => {
+                const num = parseNumberInput(e.target.value, 1);
+                if (num !== undefined) onFieldChange('threshold', num);
+              }}
+              disabled={saving}
+              className={inputClasses}
+            />
+          </label>
+          <label htmlFor="emoji" className="space-y-2">
+            <span className="text-sm font-medium">Emoji</span>
+            <div className="flex items-center gap-2">
+              <input
+                id="emoji"
+                type="text"
+                value={draftConfig.starboard?.emoji ?? '*'}
+                onChange={(e) => onFieldChange('emoji', e.target.value.trim() || '*')}
+                disabled={saving}
+                className={inputClasses}
+                placeholder="*"
+              />
+              <button
+                type="button"
+                onClick={() => onFieldChange('emoji', '*')}
+                disabled={saving}
+                className={`shrink-0 rounded-md px-3 py-2 text-xs font-medium transition-colors ${
+                  (draftConfig.starboard?.emoji ?? '*') === '*'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground hover:bg-accent'
+                }`}
+              >
+                Any ✱
+              </button>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Set a specific emoji (e.g. ⭐ 🔥 👍) or click <strong>Any</strong> to let any emoji
+              trigger the starboard.
+            </p>
+          </label>
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium">Allow Self-Star</span>
+          <ToggleSwitch
+            checked={draftConfig.starboard?.selfStarAllowed ?? false}
+            onChange={(v) => onFieldChange('selfStarAllowed', v)}
+            disabled={saving}
+            label="Self-Star Allowed"
+          />
+        </div>
+        <label htmlFor="ignored-channels" className="space-y-2">
+          <span className="text-sm font-medium">Ignored Channels</span>
+          <input
+            id="ignored-channels"
+            type="text"
+            value={(draftConfig.starboard?.ignoredChannels ?? []).join(', ')}
+            onChange={(e) =>
+              onFieldChange(
+                'ignoredChannels',
+                e.target.value
+                  .split(',')
+                  .map((s) => s.trim())
+                  .filter(Boolean),
+              )
+            }
+            disabled={saving}
+            className={inputClasses}
+            placeholder="Comma-separated channel IDs"
+          />
+        </label>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/dashboard/config-sections/TicketsSection.tsx b/web/src/components/dashboard/config-sections/TicketsSection.tsx
new file mode 100644
index 000000000..202c02a7e
--- /dev/null
+++ b/web/src/components/dashboard/config-sections/TicketsSection.tsx
@@ -0,0 +1,137 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { parseNumberInput } from '@/lib/config-normalization';
+import type { GuildConfig } from '@/lib/config-utils';
+import { ToggleSwitch } from '../toggle-switch';
+
+interface TicketsSectionProps {
+  draftConfig: GuildConfig;
+  saving: boolean;
+  onEnabledChange: (enabled: boolean) => void;
+  onFieldChange: (field: string, value: unknown) => void;
+}
+
+/** Shared input styling for text inputs and selects. */
+const inputClasses =
+  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+
+/**
+ * Tickets configuration section.
+ *
+ * Provides controls for ticket system mode, support roles, auto-close settings,
+ * and transcript channel configuration.
+ */
+export function TicketsSection({
+  draftConfig,
+  saving,
+  onEnabledChange,
+  onFieldChange,
+}: TicketsSectionProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">Tickets</CardTitle>
+          <ToggleSwitch
+            checked={draftConfig.tickets?.enabled ?? false}
+            onChange={onEnabledChange}
+            disabled={saving}
+            label="Tickets"
+          />
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <label htmlFor="ticket-mode" className="space-y-2">
+          <span className="text-sm font-medium">Ticket Mode</span>
+          <select
+            id="ticket-mode"
+            value={draftConfig.tickets?.mode ?? 'thread'}
+            onChange={(e) => onFieldChange('mode', e.target.value)}
+            disabled={saving}
+            className={inputClasses}
+          >
+            <option value="thread">Thread (private thread per ticket)</option>
+            <option value="channel">Channel (dedicated text channel per ticket)</option>
+          </select>
+          <p className="text-xs text-muted-foreground">
+            Thread mode creates private threads. Channel mode creates locked text channels with
+            permission overrides.
+          </p>
+        </label>
+        <div className="grid grid-cols-2 gap-4">
+          <label htmlFor="support-role-id" className="space-y-2">
+            <span className="text-sm font-medium">Support Role ID</span>
+            <input
+              id="support-role-id"
+              type="text"
+              value={draftConfig.tickets?.supportRole ?? ''}
+              onChange={(e) => onFieldChange('supportRole', e.target.value.trim() || null)}
+              disabled={saving}
+              className={inputClasses}
+              placeholder="Role ID for support staff"
+            />
+          </label>
+          <label htmlFor="category-channel-id" className="space-y-2">
+            <span className="text-sm font-medium">Category Channel ID</span>
+            <input
+              id="category-channel-id"
+              type="text"
+              value={draftConfig.tickets?.category ?? ''}
+              onChange={(e) => onFieldChange('category', e.target.value.trim() || null)}
+              disabled={saving}
+              className={inputClasses}
+              placeholder="Category for tickets"
+            />
+          </label>
+          <label htmlFor="auto-close-hours" className="space-y-2">
+            <span className="text-sm font-medium">Auto-Close Hours</span>
+            <input
+              id="auto-close-hours"
+              type="number"
+              min={1}
+              max={720}
+              value={draftConfig.tickets?.autoCloseHours ?? 48}
+              onChange={(e) => {
+                const num = parseNumberInput(e.target.value, 1, 720);
+                if (num !== undefined) onFieldChange('autoCloseHours', num);
+              }}
+              disabled={saving}
+              className={inputClasses}
+            />
+            <p className="text-xs text-muted-foreground">
+              Hours of inactivity before warning (then +24h to close)
+            </p>
+          </label>
+          <label htmlFor="max-open-per-user" className="space-y-2">
+            <span className="text-sm font-medium">Max Open Per User</span>
+            <input
+              id="max-open-per-user"
+              type="number"
+              min={1}
+              max={20}
+              value={draftConfig.tickets?.maxOpenPerUser ?? 3}
+              onChange={(e) => {
+                const num = parseNumberInput(e.target.value, 1, 20);
+                if (num !== undefined) onFieldChange('maxOpenPerUser', num);
+              }}
+              disabled={saving}
+              className={inputClasses}
+            />
+          </label>
+          <label className="space-y-2 col-span-2">
+            <span className="text-sm font-medium">Transcript Channel ID</span>
+            <input
+              type="text"
+              value={draftConfig.tickets?.transcriptChannel ?? ''}
+              onChange={(e) => onFieldChange('transcriptChannel', e.target.value.trim() || null)}
+              disabled={saving}
+              className={inputClasses}
+              placeholder="Channel to post ticket transcripts"
+            />
+          </label>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/web/src/components/dashboard/config-sections/TriageSection.tsx b/web/src/components/dashboard/config-sections/TriageSection.tsx
index d0b13ddf0..026aefd6a 100644
--- a/web/src/components/dashboard/config-sections/TriageSection.tsx
+++ b/web/src/components/dashboard/config-sections/TriageSection.tsx
@@ -1,13 +1,9 @@
 'use client';
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { ChannelSelector } from '@/components/ui/channel-selector';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import { useGuildSelection } from '@/hooks/use-guild-selection';
+import { parseNumberInput } from '@/lib/config-normalization';
 import type { GuildConfig } from '@/lib/config-utils';
-import { NumberField } from './NumberField';
+import { ToggleSwitch } from '../toggle-switch';
 
 interface TriageSectionProps {
   draftConfig: GuildConfig;
@@ -16,16 +12,15 @@ interface TriageSectionProps {
   onFieldChange: (field: string, value: unknown) => void;
 }
 
+/** Shared input styling for text inputs. */
+const inputClasses =
+  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+
 /**
- * Renders the Triage configuration UI for editing classifier, responder, budget, timing, toggles, and moderation log channel.
- *
- * Renders nothing if `draftConfig.triage` is not present.
+ * Triage configuration section.
  *
- * @param draftConfig - Guild configuration draft containing the `triage` settings to display and edit.
- * @param saving - When true, input controls are disabled to prevent changes during a save operation.
- * @param onEnabledChange - Invoked with the new enabled state when the Triage master switch is toggled.
- * @param onFieldChange - Invoked with `(field, value)` for individual field updates; used for all editable triage fields including `moderationLogChannel`.
- * @returns The Triage configuration card element, or `null` when triage configuration is absent.
+ * Provides controls for message triage classifier, responder models,
+ * budgets, intervals, and various feature toggles.
  */
 export function TriageSection({
   draftConfig,
@@ -33,17 +28,8 @@ export function TriageSection({
   onEnabledChange,
   onFieldChange,
 }: TriageSectionProps) {
-  const guildId = useGuildSelection();
-
   if (!draftConfig.triage) return null;
 
-  const moderationLogChannel = draftConfig.triage?.moderationLogChannel ?? '';
-  const selectedChannels = moderationLogChannel ? [moderationLogChannel] : [];
-
-  const handleChannelChange = (channels: string[]) => {
-    onFieldChange('moderationLogChannel', channels[0] ?? '');
-  };
-
   return (
     <Card>
       <CardHeader>
@@ -54,140 +40,185 @@ export function TriageSection({
               Configure message triage classifier, responder models, and channels.
             </CardDescription>
           </div>
-          <Switch
+          <ToggleSwitch
             checked={draftConfig.triage?.enabled ?? false}
-            onCheckedChange={onEnabledChange}
+            onChange={onEnabledChange}
             disabled={saving}
-            aria-label="Toggle Triage"
+            label="Triage"
           />
         </div>
       </CardHeader>
       <CardContent className="space-y-4">
-        <div className="space-y-2">
-          <Label htmlFor="classify-model">Classify Model</Label>
-          <Input
+        <label htmlFor="classify-model" className="space-y-2">
+          <span className="text-sm font-medium">Classify Model</span>
+          <input
             id="classify-model"
             type="text"
             value={draftConfig.triage?.classifyModel ?? ''}
             onChange={(e) => onFieldChange('classifyModel', e.target.value)}
             disabled={saving}
+            className={inputClasses}
             placeholder="e.g. claude-haiku-4-5"
           />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="respond-model">Respond Model</Label>
-          <Input
+        </label>
+        <label htmlFor="respond-model" className="space-y-2">
+          <span className="text-sm font-medium">Respond Model</span>
+          <input
             id="respond-model"
             type="text"
             value={draftConfig.triage?.respondModel ?? ''}
             onChange={(e) => onFieldChange('respondModel', e.target.value)}
             disabled={saving}
+            className={inputClasses}
             placeholder="e.g. claude-sonnet-4-6"
           />
-        </div>
+        </label>
         <div className="grid grid-cols-2 gap-4">
-          <NumberField
-            label="Classify Budget"
-            value={draftConfig.triage?.classifyBudget ?? 0}
-            onChange={(v) => onFieldChange('classifyBudget', v)}
-            disabled={saving}
-            step={0.01}
-            min={0}
-          />
-          <NumberField
-            label="Respond Budget"
-            value={draftConfig.triage?.respondBudget ?? 0}
-            onChange={(v) => onFieldChange('respondBudget', v)}
-            disabled={saving}
-            step={0.01}
-            min={0}
-          />
+          <label htmlFor="classify-budget" className="space-y-2">
+            <span className="text-sm font-medium">Classify Budget</span>
+            <input
+              id="classify-budget"
+              type="number"
+              step="0.01"
+              min={0}
+              value={draftConfig.triage?.classifyBudget ?? 0}
+              onChange={(e) => {
+                const num = parseNumberInput(e.target.value, 0);
+                if (num !== undefined) onFieldChange('classifyBudget', num);
+              }}
+              disabled={saving}
+              className={inputClasses}
+            />
+          </label>
+          <label htmlFor="respond-budget" className="space-y-2">
+            <span className="text-sm font-medium">Respond Budget</span>
+            <input
+              id="respond-budget"
+              type="number"
+              step="0.01"
+              min={0}
+              value={draftConfig.triage?.respondBudget ?? 0}
+              onChange={(e) => {
+                const num = parseNumberInput(e.target.value, 0);
+                if (num !== undefined) onFieldChange('respondBudget', num);
+              }}
+              disabled={saving}
+              className={inputClasses}
+            />
+          </label>
         </div>
         <div className="grid grid-cols-2 gap-4">
-          <NumberField
-            label="Default Interval (ms)"
-            value={draftConfig.triage?.defaultInterval ?? 3000}
-            onChange={(v) => onFieldChange('defaultInterval', v)}
-            disabled={saving}
-            min={1}
-          />
-          <NumberField
-            label="Timeout (ms)"
-            value={draftConfig.triage?.timeout ?? 30000}
-            onChange={(v) => onFieldChange('timeout', v)}
-            disabled={saving}
-            min={1}
-          />
+          <label htmlFor="default-interval-ms" className="space-y-2">
+            <span className="text-sm font-medium">Default Interval (ms)</span>
+            <input
+              id="default-interval-ms"
+              type="number"
+              min={1}
+              value={draftConfig.triage?.defaultInterval ?? 3000}
+              onChange={(e) => {
+                const num = parseNumberInput(e.target.value, 1);
+                if (num !== undefined) onFieldChange('defaultInterval', num);
+              }}
+              disabled={saving}
+              className={inputClasses}
+            />
+          </label>
+          <label htmlFor="timeout-ms" className="space-y-2">
+            <span className="text-sm font-medium">Timeout (ms)</span>
+            <input
+              id="timeout-ms"
+              type="number"
+              min={1}
+              value={draftConfig.triage?.timeout ?? 30000}
+              onChange={(e) => {
+                const num = parseNumberInput(e.target.value, 1);
+                if (num !== undefined) onFieldChange('timeout', num);
+              }}
+              disabled={saving}
+              className={inputClasses}
+            />
+          </label>
         </div>
         <div className="grid grid-cols-2 gap-4">
-          <NumberField
-            label="Context Messages"
-            value={draftConfig.triage?.contextMessages ?? 10}
-            onChange={(v) => onFieldChange('contextMessages', v)}
-            disabled={saving}
-            min={1}
-          />
-          <NumberField
-            label="Max Buffer Size"
-            value={draftConfig.triage?.maxBufferSize ?? 30}
-            onChange={(v) => onFieldChange('maxBufferSize', v)}
-            disabled={saving}
-            min={1}
-          />
+          <label htmlFor="context-messages" className="space-y-2">
+            <span className="text-sm font-medium">Context Messages</span>
+            <input
+              id="context-messages"
+              type="number"
+              min={1}
+              value={draftConfig.triage?.contextMessages ?? 10}
+              onChange={(e) => {
+                const num = parseNumberInput(e.target.value, 1);
+                if (num !== undefined) onFieldChange('contextMessages', num);
+              }}
+              disabled={saving}
+              className={inputClasses}
+            />
+          </label>
+          <label htmlFor="max-buffer-size" className="space-y-2">
+            <span className="text-sm font-medium">Max Buffer Size</span>
+            <input
+              id="max-buffer-size"
+              type="number"
+              min={1}
+              value={draftConfig.triage?.maxBufferSize ?? 30}
+              onChange={(e) => {
+                const num = parseNumberInput(e.target.value, 1);
+                if (num !== undefined) onFieldChange('maxBufferSize', num);
+              }}
+              disabled={saving}
+              className={inputClasses}
+            />
+          </label>
         </div>
         <div className="flex items-center justify-between">
-          <Label htmlFor="streaming" className="text-sm font-medium">
-            Streaming
-          </Label>
-          <Switch
-            id="streaming"
+          <span className="text-sm font-medium">Streaming</span>
+          <ToggleSwitch
             checked={draftConfig.triage?.streaming ?? false}
-            onCheckedChange={(v) => onFieldChange('streaming', v)}
+            onChange={(v) => onFieldChange('streaming', v)}
             disabled={saving}
-            aria-label="Toggle streaming"
+            label="Streaming"
           />
         </div>
         <div className="flex items-center justify-between">
-          <Label htmlFor="moderation-response" className="text-sm font-medium">
-            Moderation Response
-          </Label>
-          <Switch
-            id="moderation-response"
+          <span className="text-sm font-medium">Moderation Response</span>
+          <ToggleSwitch
             checked={draftConfig.triage?.moderationResponse ?? false}
-            onCheckedChange={(v) => onFieldChange('moderationResponse', v)}
+            onChange={(v) => onFieldChange('moderationResponse', v)}
             disabled={saving}
-            aria-label="Toggle moderation response"
+            label="Moderation Response"
           />
         </div>
         <div className="flex items-center justify-between">
-          <Label htmlFor="debug-footer" className="text-sm font-medium">
-            Debug Footer
-          </Label>
-          <Switch
-            id="debug-footer"
+          <span className="text-sm font-medium">Debug Footer</span>
+          <ToggleSwitch
             checked={draftConfig.triage?.debugFooter ?? false}
-            onCheckedChange={(v) => onFieldChange('debugFooter', v)}
+            onChange={(v) => onFieldChange('debugFooter', v)}
             disabled={saving}
-            aria-label="Toggle debug footer"
+            label="Debug Footer"
           />
         </div>
-        <div className="space-y-2">
-          <Label htmlFor="moderation-log-channel">Moderation Log Channel</Label>
-          {guildId ? (
-            <ChannelSelector
-              id="moderation-log-channel"
-              guildId={guildId}
-              selected={selectedChannels}
-              onChange={handleChannelChange}
-              placeholder="Select moderation log channel..."
-              disabled={saving}
-              maxSelections={1}
-              filter="text"
-            />
-          ) : (
-            <p className="text-muted-foreground text-sm">Select a server first</p>
-          )}
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium">Status Reactions</span>
+          <ToggleSwitch
+            checked={draftConfig.triage?.statusReactions ?? false}
+            onChange={(v) => onFieldChange('statusReactions', v)}
+            disabled={saving}
+            label="Status Reactions"
+          />
         </div>
+        <label htmlFor="moderation-log-channel" className="space-y-2">
+          <span className="text-sm font-medium">Moderation Log Channel</span>
+          <input
+            id="moderation-log-channel"
+            type="text"
+            value={draftConfig.triage?.moderationLogChannel ?? ''}
+            onChange={(e) => onFieldChange('moderationLogChannel', e.target.value.trim() || null)}
+            disabled={saving}
+            className={inputClasses}
+            placeholder="Channel ID for moderation logs"
+          />
+        </label>
       </CardContent>
     </Card>
   );
diff --git a/web/src/components/dashboard/config-sections/WelcomeSection.tsx b/web/src/components/dashboard/config-sections/WelcomeSection.tsx
index 349ae39a8..b73df4a51 100644
--- a/web/src/components/dashboard/config-sections/WelcomeSection.tsx
+++ b/web/src/components/dashboard/config-sections/WelcomeSection.tsx
@@ -1,24 +1,61 @@
 'use client';
 
+import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import { Textarea } from '@/components/ui/textarea';
+import { RoleSelector } from '@/components/ui/role-selector';
 import type { GuildConfig } from '@/lib/config-utils';
+import { ToggleSwitch } from '../toggle-switch';
 
 interface WelcomeSectionProps {
   draftConfig: GuildConfig;
+  guildId: string;
   saving: boolean;
+  dmStepsRaw: string;
   onEnabledChange: (enabled: boolean) => void;
   onMessageChange: (message: string) => void;
+  onFieldChange: (field: string, value: unknown) => void;
+  onRoleMenuChange: (field: string, value: unknown) => void;
+  onDmSequenceChange: (field: string, value: unknown) => void;
+  onDmStepsRawChange: (value: string) => void;
 }
 
+/** Shared input styling for text inputs and textareas. */
+const inputClasses =
+  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+
+/**
+ * Generate a UUID with fallback for environments without crypto.randomUUID.
+ */
+function generateId(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+/**
+ * Welcome Messages configuration section.
+ *
+ * Provides controls for welcome messages, role menu, and DM sequence settings.
+ */
 export function WelcomeSection({
   draftConfig,
+  guildId,
   saving,
+  dmStepsRaw,
   onEnabledChange,
   onMessageChange,
+  onFieldChange,
+  onRoleMenuChange,
+  onDmSequenceChange,
+  onDmStepsRawChange,
 }: WelcomeSectionProps) {
+  const roleMenuOptions = draftConfig.welcome?.roleMenu?.options ?? [];
+
   return (
     <Card>
       <CardHeader>
@@ -27,30 +64,179 @@ export function WelcomeSection({
             <CardTitle className="text-base">Welcome Messages</CardTitle>
             <CardDescription>Greet new members when they join the server.</CardDescription>
           </div>
-          <Switch
+          <ToggleSwitch
             checked={draftConfig.welcome?.enabled ?? false}
-            onCheckedChange={onEnabledChange}
+            onChange={onEnabledChange}
             disabled={saving}
-            aria-label="Toggle Welcome Messages"
+            label="Welcome Messages"
           />
         </div>
       </CardHeader>
-      <CardContent>
-        <div className="space-y-2">
-          <Label htmlFor="welcome-message">Welcome Message</Label>
-          <Textarea
+      <CardContent className="space-y-4">
+        <label htmlFor="welcome-message" className="space-y-2">
+          <span className="text-sm font-medium">Welcome Message</span>
+          <textarea
             id="welcome-message"
             value={draftConfig.welcome?.message ?? ''}
             onChange={(e) => onMessageChange(e.target.value)}
             rows={4}
             disabled={saving}
+            className={inputClasses}
             placeholder="Welcome message template..."
             aria-describedby="welcome-message-hint"
           />
-        </div>
+        </label>
         <p id="welcome-message-hint" className="mt-1 text-xs text-muted-foreground">
           Use {'{user}'} for the member mention and {'{memberCount}'} for the server member count.
         </p>
+
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+          <label htmlFor="rules-channel-id" className="space-y-2">
+            <span className="text-sm font-medium">Rules Channel ID</span>
+            <input
+              id="rules-channel-id"
+              type="text"
+              value={draftConfig.welcome?.rulesChannel ?? ''}
+              onChange={(e) => onFieldChange('rulesChannel', e.target.value.trim() || null)}
+              disabled={saving}
+              className={inputClasses}
+              placeholder="Channel where Accept Rules button lives"
+            />
+          </label>
+          <label htmlFor="verified-role-id" className="space-y-2">
+            <span className="text-sm font-medium">Verified Role ID</span>
+            <input
+              id="verified-role-id"
+              type="text"
+              value={draftConfig.welcome?.verifiedRole ?? ''}
+              onChange={(e) => onFieldChange('verifiedRole', e.target.value.trim() || null)}
+              disabled={saving}
+              className={inputClasses}
+              placeholder="Role granted after rules acceptance"
+            />
+          </label>
+          <label htmlFor="intro-channel-id" className="space-y-2">
+            <span className="text-sm font-medium">Intro Channel ID</span>
+            <input
+              id="intro-channel-id"
+              type="text"
+              value={draftConfig.welcome?.introChannel ?? ''}
+              onChange={(e) => onFieldChange('introChannel', e.target.value.trim() || null)}
+              disabled={saving}
+              className={inputClasses}
+              placeholder="Channel to prompt member intros"
+            />
+          </label>
+        </div>
+
+        <fieldset className="space-y-2 rounded-md border p-3">
+          <legend className="text-sm font-medium">Role Menu</legend>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">Enable self-assignable role menu</span>
+            <ToggleSwitch
+              checked={draftConfig.welcome?.roleMenu?.enabled ?? false}
+              onChange={(v) => onRoleMenuChange('enabled', v)}
+              disabled={saving}
+              label="Role Menu"
+            />
+          </div>
+          <div className="space-y-3">
+            {roleMenuOptions.map((opt, i) => (
+              <div key={opt.id} className="flex flex-col gap-2 rounded-md border p-2">
+                <div className="flex items-center gap-2">
+                  <input
+                    type="text"
+                    value={opt.label ?? ''}
+                    onChange={(e) => {
+                      const opts = [...roleMenuOptions];
+                      opts[i] = { ...opts[i], label: e.target.value };
+                      onRoleMenuChange('options', opts);
+                    }}
+                    disabled={saving}
+                    className={`${inputClasses} flex-1`}
+                    placeholder="Label (shown in menu)"
+                  />
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      const opts = roleMenuOptions.filter((o) => o.id !== opt.id);
+                      onRoleMenuChange('options', opts);
+                    }}
+                    disabled={saving}
+                    aria-label={`Remove role option ${opt.label || i + 1}`}
+                  >
+                    ✕
+                  </Button>
+                </div>
+                <RoleSelector
+                  guildId={guildId}
+                  selected={opt.roleId ? [opt.roleId] : []}
+                  onChange={(selected) => {
+                    const opts = [...roleMenuOptions];
+                    opts[i] = { ...opts[i], roleId: selected[0] ?? '' };
+                    onRoleMenuChange('options', opts);
+                  }}
+                  placeholder="Select role"
+                  disabled={saving}
+                  maxSelections={1}
+                />
+                <input
+                  type="text"
+                  value={opt.description ?? ''}
+                  onChange={(e) => {
+                    const opts = [...roleMenuOptions];
+                    opts[i] = { ...opts[i], description: e.target.value || undefined };
+                    onRoleMenuChange('options', opts);
+                  }}
+                  disabled={saving}
+                  className={inputClasses}
+                  placeholder="Description (optional)"
+                />
+              </div>
+            ))}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                const opts = [...roleMenuOptions, { id: generateId(), label: '', roleId: '' }];
+                onRoleMenuChange('options', opts);
+              }}
+              disabled={saving || roleMenuOptions.length >= 25}
+            >
+              + Add Role Option
+            </Button>
+          </div>
+        </fieldset>
+
+        <fieldset className="space-y-2 rounded-md border p-3">
+          <legend className="text-sm font-medium">DM Sequence</legend>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">Enable onboarding DMs</span>
+            <ToggleSwitch
+              checked={draftConfig.welcome?.dmSequence?.enabled ?? false}
+              onChange={(v) => onDmSequenceChange('enabled', v)}
+              disabled={saving}
+              label="DM Sequence"
+            />
+          </div>
+          <textarea
+            value={dmStepsRaw}
+            onChange={(e) => onDmStepsRawChange(e.target.value)}
+            onBlur={(e) => {
+              const parsed = e.currentTarget.value
+                .split('\n')
+                .map((line) => line.trim())
+                .filter(Boolean);
+              onDmSequenceChange('steps', parsed);
+              onDmStepsRawChange(parsed.join('\n'));
+            }}
+            rows={4}
+            disabled={saving}
+            className={inputClasses}
+            placeholder="One DM step per line"
+          />
+        </fieldset>
       </CardContent>
     </Card>
   );
diff --git a/web/src/components/dashboard/config-sections/index.ts b/web/src/components/dashboard/config-sections/index.ts
new file mode 100644
index 000000000..0cb9138e0
--- /dev/null
+++ b/web/src/components/dashboard/config-sections/index.ts
@@ -0,0 +1,14 @@
+export { AiAutoModSection } from './AiAutoModSection';
+export { AiSection } from './AiSection';
+export { ChallengesSection } from './ChallengesSection';
+export { CommunityFeaturesSection } from './CommunityFeaturesSection';
+export { EngagementSection } from './EngagementSection';
+export { GitHubSection } from './GitHubSection';
+export { MemorySection } from './MemorySection';
+export { ModerationSection } from './ModerationSection';
+export { PermissionsSection } from './PermissionsSection';
+export { ReputationSection } from './ReputationSection';
+export { StarboardSection } from './StarboardSection';
+export { TicketsSection } from './TicketsSection';
+export { TriageSection } from './TriageSection';
+export { WelcomeSection } from './WelcomeSection';
diff --git a/web/src/lib/config-normalization.ts b/web/src/lib/config-normalization.ts
new file mode 100644
index 000000000..edeefd297
--- /dev/null
+++ b/web/src/lib/config-normalization.ts
@@ -0,0 +1,93 @@
+/**
+ * Normalization utilities for config editor values.
+ *
+ * Provides consistent transformation of user input (strings, arrays)
+ * into API-compatible formats.
+ */
+
+/**
+ * Parse a comma-separated string into an array of trimmed, non-empty strings.
+ *
+ * @param raw - The comma-separated input string
+ * @returns Array of trimmed, non-empty values
+ */
+export function parseCommaSeparatedList(raw: string): string[] {
+  return raw
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+/**
+ * Normalize a comma-separated list of role IDs for display.
+ * Joins array values with ', ' for consistent formatting.
+ *
+ * @param roleIds - Array of role ID strings
+ * @returns Formatted string for display in inputs
+ */
+export function formatRoleIdsForDisplay(roleIds: string[]): string {
+  return roleIds.join(', ');
+}
+
+/**
+ * Parse newline-separated text into an array of trimmed, non-empty lines.
+ *
+ * @param raw - The multiline input string
+ * @returns Array of trimmed, non-empty lines
+ */
+export function parseNewlineSeparatedList(raw: string): string[] {
+  return raw
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+}
+
+/**
+ * Parse a numeric text input into a number, applying optional minimum/maximum bounds.
+ *
+ * @param raw - The input string to parse; an empty string yields `undefined`
+ * @param min - Optional lower bound; if the parsed value is less than `min`, `min` is returned
+ * @param max - Optional upper bound; if the parsed value is greater than `max`, `max` is returned
+ * @returns `undefined` if `raw` is empty or cannot be parsed as a finite number, otherwise the parsed number (clamped to `min`/`max` when provided)
+ */
+export function parseNumberInput(raw: string, min?: number, max?: number): number | undefined {
+  if (raw === '') return undefined;
+  const num = Number(raw);
+  if (!Number.isFinite(num)) return undefined;
+  if (min !== undefined && num < min) return min;
+  if (max !== undefined && num > max) return max;
+  return num;
+}
+
+/**
+ * Normalize a threshold percentage (0-100) to a decimal (0-1).
+ *
+ * @param percent - The percentage value (0-100)
+ * @returns Clamped decimal value between 0 and 1
+ */
+export function percentToDecimal(percent: number): number {
+  if (Number.isNaN(percent)) return 0;
+  return Math.min(1, Math.max(0, percent / 100));
+}
+
+/**
+ * Convert a decimal threshold (0-1) to a percentage (0-100) for display.
+ *
+ * @param decimal - The decimal value (0-1)
+ * @returns Percentage value rounded to nearest integer
+ */
+export function decimalToPercent(decimal: number): number {
+  return Math.round(decimal * 100);
+}
+
+/**
+ * Normalize an optional string value for API storage.
+ * Converts empty strings to null, otherwise trims whitespace.
+ *
+ * @param value - The input string value
+ * @returns Trimmed string or null if empty
+ */
+export function normalizeOptionalString(value: string): string | null {
+  const trimmed = value.trim();
+  return trimmed || null;
+}
diff --git a/web/src/lib/config-updates.ts b/web/src/lib/config-updates.ts
new file mode 100644
index 000000000..6bf132a1c
--- /dev/null
+++ b/web/src/lib/config-updates.ts
@@ -0,0 +1,234 @@
+import type { GuildConfig } from '@/lib/config-utils';
+
+/**
+ * Immutable update utilities for guild configuration.
+ *
+ * These helpers produce new config objects with updated values,
+ * preserving immutability and type safety.
+ */
+
+/**
+ * Update a top-level section's enabled flag.
+ *
+ * @param config - The current guild config
+ * @param section - The section name to update
+ * @param enabled - The new enabled value
+ * @returns Updated config with the section's enabled flag set
+ */
+export function updateSectionEnabled<K extends keyof GuildConfig>(
+  config: GuildConfig,
+  section: K,
+  enabled: boolean,
+): GuildConfig {
+  return {
+    ...config,
+    [section]: {
+      ...((config[section] as Record<string, unknown>) || {}),
+      enabled,
+    },
+  } as GuildConfig;
+}
+
+/**
+ * Update a field within a specific section.
+ *
+ * @param config - The current guild config
+ * @param section - The section name to update
+ * @param field - The field name within the section
+ * @param value - The new value
+ * @returns Updated config with the field set
+ */
+export function updateSectionField<K extends keyof GuildConfig>(
+  config: GuildConfig,
+  section: K,
+  field: string,
+  value: unknown,
+): GuildConfig {
+  return {
+    ...config,
+    [section]: {
+      ...((config[section] as Record<string, unknown>) || {}),
+      [field]: value,
+    },
+  } as GuildConfig;
+}
+
+/**
+ * Update a nested object field within a section.
+ *
+ * @param config - The current guild config
+ * @param section - The section name to update
+ * @param nestedKey - The nested object key (e.g., 'rateLimit', 'protectRoles')
+ * @param field - The field name within the nested object
+ * @param value - The new value
+ * @returns Updated config with the nested field set
+ */
+export function updateNestedField<K extends keyof GuildConfig>(
+  config: GuildConfig,
+  section: K,
+  nestedKey: string,
+  field: string,
+  value: unknown,
+): GuildConfig {
+  const sectionData = (config[section] as Record<string, unknown>) || {};
+  const nestedData = (sectionData[nestedKey] as Record<string, unknown>) || {};
+
+  return {
+    ...config,
+    [section]: {
+      ...sectionData,
+      [nestedKey]: {
+        ...nestedData,
+        [field]: value,
+      },
+    },
+  } as GuildConfig;
+}
+
+/**
+ * Update an array item at a specific index within a nested path.
+ *
+ * @param config - The current guild config
+ * @param section - The section name
+ * @param path - Array of keys to traverse (e.g., ['roleMenu', 'options'])
+ * @param index - The index to update
+ * @param item - The new item value
+ * @returns Updated config with the array item replaced
+ */
+export function updateArrayItem<T>(
+  config: GuildConfig,
+  section: keyof GuildConfig,
+  path: string[],
+  index: number,
+  item: T,
+): GuildConfig {
+  const sectionData = (config[section] as Record<string, unknown>) || {};
+
+  // Handle edge case: empty path
+  if (path.length === 0) return config;
+
+  // Track each level's data during traversal for correct rebuilding
+  const levels: Record<string, unknown>[] = [sectionData];
+  let cursor: Record<string, unknown> = sectionData;
+  for (let i = 0; i < path.length - 1; i++) {
+    const next = (cursor[path[i]] as Record<string, unknown>) || {};
+    levels.push(next);
+    cursor = next;
+  }
+
+  const lastKey = path[path.length - 1];
+  const arr = [...((cursor[lastKey] as T[]) || [])];
+
+  // Validate index bounds
+  if (!Number.isInteger(index) || index < 0 || index >= arr.length) {
+    return config;
+  }
+
+  arr[index] = item;
+
+  // Rebuild from bottom up using tracked levels
+  let rebuilt: Record<string, unknown> = { ...cursor, [lastKey]: arr };
+  for (let i = path.length - 2; i >= 0; i--) {
+    rebuilt = { ...levels[i], [path[i]]: rebuilt };
+  }
+
+  return {
+    ...config,
+    [section]: rebuilt,
+  } as GuildConfig;
+}
+
+/**
+ * Remove an array item at a specific index within a nested path.
+ *
+ * @param config - The current guild config
+ * @param section - The section name
+ * @param path - Array of keys to traverse (e.g., ['roleMenu', 'options'])
+ * @param index - The index to remove
+ * @returns Updated config with the array item removed
+ */
+export function removeArrayItem(
+  config: GuildConfig,
+  section: keyof GuildConfig,
+  path: string[],
+  index: number,
+): GuildConfig {
+  const sectionData = (config[section] as Record<string, unknown>) || {};
+
+  // Handle edge case: empty path
+  if (path.length === 0) return config;
+
+  // Track each level's data during traversal for correct rebuilding
+  const levels: Record<string, unknown>[] = [sectionData];
+  let cursor: Record<string, unknown> = sectionData;
+  for (let i = 0; i < path.length - 1; i++) {
+    const next = (cursor[path[i]] as Record<string, unknown>) || {};
+    levels.push(next);
+    cursor = next;
+  }
+
+  const lastKey = path[path.length - 1];
+  const arr = [...((cursor[lastKey] as unknown[]) || [])];
+
+  // Validate index bounds
+  if (!Number.isInteger(index) || index < 0 || index >= arr.length) {
+    return config;
+  }
+
+  arr.splice(index, 1);
+
+  // Rebuild from bottom up using tracked levels
+  let rebuilt: Record<string, unknown> = { ...cursor, [lastKey]: arr };
+  for (let i = path.length - 2; i >= 0; i--) {
+    rebuilt = { ...levels[i], [path[i]]: rebuilt };
+  }
+
+  return {
+    ...config,
+    [section]: rebuilt,
+  } as GuildConfig;
+}
+
+/**
+ * Append an item to an array within a nested path.
+ *
+ * @param config - The current guild config
+ * @param section - The section name
+ * @param path - Array of keys to traverse (e.g., ['roleMenu', 'options'])
+ * @param item - The item to append
+ * @returns Updated config with the item appended
+ */
+export function appendArrayItem<T>(
+  config: GuildConfig,
+  section: keyof GuildConfig,
+  path: string[],
+  item: T,
+): GuildConfig {
+  const sectionData = (config[section] as Record<string, unknown>) || {};
+
+  // Handle edge case: empty path
+  if (path.length === 0) return config;
+
+  // Track each level's data during traversal for correct rebuilding
+  const levels: Record<string, unknown>[] = [sectionData];
+  let cursor: Record<string, unknown> = sectionData;
+  for (let i = 0; i < path.length - 1; i++) {
+    const next = (cursor[path[i]] as Record<string, unknown>) || {};
+    levels.push(next);
+    cursor = next;
+  }
+
+  const lastKey = path[path.length - 1];
+  const arr = [...((cursor[lastKey] as T[]) || []), item];
+
+  // Rebuild from bottom up using tracked levels
+  let rebuilt: Record<string, unknown> = { ...cursor, [lastKey]: arr };
+  for (let i = path.length - 2; i >= 0; i--) {
+    rebuilt = { ...levels[i], [path[i]]: rebuilt };
+  }
+
+  return {
+    ...config,
+    [section]: rebuilt,
+  } as GuildConfig;
+}
diff --git a/web/tests/components/dashboard/config-editor-autosave.test.tsx b/web/tests/components/dashboard/config-editor-autosave.test.tsx
index 92959e08b..2beb83f40 100644
--- a/web/tests/components/dashboard/config-editor-autosave.test.tsx
+++ b/web/tests/components/dashboard/config-editor-autosave.test.tsx
@@ -1,14 +1,14 @@
 /**
- * Tests for the auto-save feature in ConfigEditor.
+ * Tests for config-editor section components and save/revert behavior.
  *
  * 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
+ * - ConfigEditor loads config without triggering save (no PATCH on mount)
+ * - Validation error detection for system prompt length
+ * - Section-level revert functionality
+ * - Normalization utilities
  */
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, waitFor, act, fireEvent } from '@testing-library/react';
+import { render, screen, waitFor, act } from '@testing-library/react';
 
 // ── Mocks ─────────────────────────────────────────────────────────
 
@@ -25,7 +25,7 @@ vi.mock('@/components/dashboard/reset-defaults-button', () => ({
     onReset: () => void;
     disabled: boolean;
   }) => (
-    <button onClick={onReset} disabled={disabled}>
+    <button onClick={onReset} disabled={disabled} data-testid="discard-button">
       Discard
     </button>
   ),
@@ -59,6 +59,10 @@ vi.mock('@/components/dashboard/config-diff', () => ({
   ConfigDiff: () => <div data-testid="config-diff" />,
 }));
 
+vi.mock('@/components/dashboard/config-diff-modal', () => ({
+  ConfigDiffModal: () => <div data-testid="config-diff-modal" />,
+}));
+
 // ── Fixtures ──────────────────────────────────────────────────────
 
 const minimalConfig = {
@@ -86,7 +90,7 @@ const minimalConfig = {
 
 // ── Tests ─────────────────────────────────────────────────────────
 
-describe('ConfigEditor auto-save integration', () => {
+describe('ConfigEditor integration', () => {
   beforeEach(() => {
     localStorage.clear();
     localStorage.setItem('volvox-bot-selected-guild', 'guild-123');
@@ -123,7 +127,7 @@ describe('ConfigEditor auto-save integration', () => {
     expect(patchCalls).toHaveLength(0);
   });
 
-  it('shows validation error banner when system prompt exceeds max length', async () => {
+  it('renders all section components after loading', async () => {
     const fetchMock = vi.fn().mockResolvedValue({
       ok: true,
       status: 200,
@@ -136,50 +140,18 @@ describe('ConfigEditor auto-save integration', () => {
 
     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();
+        expect(screen.getByText('Bot Configuration')).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();
+    // Check that main sections are rendered
+    expect(screen.getByText('AI Chat')).toBeInTheDocument();
+    expect(screen.getByText('Welcome Messages')).toBeInTheDocument();
+    expect(screen.getByText('Save Changes')).toBeInTheDocument();
   });
 
-  it('shows no status indicator when idle', async () => {
+  it('renders with initial disabled discard button', async () => {
     const fetchMock = vi.fn().mockResolvedValue({
       ok: true,
       status: 200,
@@ -190,128 +162,91 @@ describe('auto-save status UI', () => {
     const { ConfigEditor } = await import('@/components/dashboard/config-editor');
     render(<ConfigEditor />);
 
-    await act(async () => {
-      await vi.advanceTimersByTimeAsync(10);
-    });
+    await waitFor(
+      () => {
+        expect(screen.getByTestId('system-prompt')).toBeInTheDocument();
+      },
+      { timeout: 3000 },
+    );
 
-    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();
+    // Initially discard button should be disabled (no changes yet)
+    const discardButton = screen.getByTestId('discard-button');
+    expect(discardButton).toBeDisabled();
   });
+});
 
-  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);
-    });
+// ── Unit tests for normalization utilities ────────────────────────
 
-    expect(screen.getByText('Saving...')).toBeInTheDocument();
+describe('config-normalization', () => {
+  it('parseNumberInput handles valid numbers', async () => {
+    const { parseNumberInput } = await import('@/lib/config-normalization');
+    expect(parseNumberInput('42')).toBe(42);
+    expect(parseNumberInput('3.14')).toBe(3.14);
+    expect(parseNumberInput('0')).toBe(0);
   });
 
-  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);
-    });
+  it('parseNumberInput returns undefined for empty string', async () => {
+    const { parseNumberInput } = await import('@/lib/config-normalization');
+    expect(parseNumberInput('')).toBeUndefined();
+  });
 
-    expect(screen.getByText('Saved')).toBeInTheDocument();
+  it('parseNumberInput clamps to min/max bounds', async () => {
+    const { parseNumberInput } = await import('@/lib/config-normalization');
+    expect(parseNumberInput('5', 10)).toBe(10);
+    expect(parseNumberInput('100', 0, 50)).toBe(50);
+    expect(parseNumberInput('25', 10, 50)).toBe(25);
   });
 
-  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);
+  it('percentToDecimal converts correctly', async () => {
+    const { percentToDecimal } = await import('@/lib/config-normalization');
+    expect(percentToDecimal(100)).toBe(1);
+    expect(percentToDecimal(50)).toBe(0.5);
+    expect(percentToDecimal(0)).toBe(0);
+    expect(percentToDecimal(150)).toBe(1); // clamped
+    expect(percentToDecimal(-50)).toBe(0); // clamped
+  });
 
-    const { ConfigEditor } = await import('@/components/dashboard/config-editor');
-    render(<ConfigEditor />);
+  it('decimalToPercent converts correctly', async () => {
+    const { decimalToPercent } = await import('@/lib/config-normalization');
+    expect(decimalToPercent(1)).toBe(100);
+    expect(decimalToPercent(0.5)).toBe(50);
+    expect(decimalToPercent(0)).toBe(0);
+    expect(decimalToPercent(0.333)).toBe(33);
+  });
+});
 
-    await act(async () => {
-      await vi.advanceTimersByTimeAsync(10);
-    });
+// ── Unit tests for config update utilities ────────────────────────
 
-    expect(screen.getByTestId('system-prompt')).toBeInTheDocument();
+describe('config-updates', () => {
+  const baseConfig = {
+    ai: { enabled: false, systemPrompt: '' },
+    welcome: { enabled: false, message: '' },
+  };
 
-    await act(async () => {
-      fireEvent.change(screen.getByTestId('system-prompt'), {
-        target: { value: 'Trigger save failure' },
-      });
-    });
+  it('updateSectionEnabled toggles section enabled state', async () => {
+    const { updateSectionEnabled } = await import('@/lib/config-updates');
+    const result = updateSectionEnabled(baseConfig, 'ai', true);
+    expect(result.ai?.enabled).toBe(true);
+    expect(result.welcome?.enabled).toBe(false);
+  });
 
-    // Advance past debounce + let save attempt complete
-    await act(async () => {
-      await vi.advanceTimersByTimeAsync(600);
-    });
-    await act(async () => {
-      await vi.advanceTimersByTimeAsync(10);
-    });
+  it('updateSectionField updates specific field', async () => {
+    const { updateSectionField } = await import('@/lib/config-updates');
+    const result = updateSectionField(baseConfig, 'ai', 'systemPrompt', 'Hello');
+    expect(result.ai?.systemPrompt).toBe('Hello');
+    expect(result.ai?.enabled).toBe(false);
+  });
 
-    expect(screen.getByText('Save failed')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Retry save' })).toBeInTheDocument();
+  it('updateNestedField updates nested object fields', async () => {
+    const { updateNestedField } = await import('@/lib/config-updates');
+    const configWithNested = {
+      ...baseConfig,
+      moderation: {
+        enabled: false,
+        rateLimit: { enabled: false, maxMessages: 10 },
+      },
+    };
+    const result = updateNestedField(configWithNested, 'moderation', 'rateLimit', 'maxMessages', 20);
+    expect((result.moderation as { rateLimit?: { maxMessages?: number } })?.rateLimit?.maxMessages).toBe(20);
   });
 });
diff --git a/web/tests/lib/config-normalization.test.ts b/web/tests/lib/config-normalization.test.ts
new file mode 100644
index 000000000..6d1724d34
--- /dev/null
+++ b/web/tests/lib/config-normalization.test.ts
@@ -0,0 +1,188 @@
+import { describe, expect, it } from 'vitest';
+import {
+  parseCommaSeparatedList,
+  formatRoleIdsForDisplay,
+  parseNewlineSeparatedList,
+  parseNumberInput,
+  percentToDecimal,
+  decimalToPercent,
+  normalizeOptionalString,
+} from '@/lib/config-normalization';
+
+describe('config-normalization', () => {
+  describe('parseCommaSeparatedList', () => {
+    it('parses comma-separated values into trimmed array', () => {
+      const result = parseCommaSeparatedList('a, b, c');
+      expect(result).toEqual(['a', 'b', 'c']);
+    });
+
+    it('handles extra whitespace', () => {
+      const result = parseCommaSeparatedList('  a  ,  b  ,  c  ');
+      expect(result).toEqual(['a', 'b', 'c']);
+    });
+
+    it('filters empty values', () => {
+      const result = parseCommaSeparatedList('a,,b,,c,');
+      expect(result).toEqual(['a', 'b', 'c']);
+    });
+
+    it('returns empty array for empty string', () => {
+      const result = parseCommaSeparatedList('');
+      expect(result).toEqual([]);
+    });
+
+    it('handles single value', () => {
+      const result = parseCommaSeparatedList('123456789');
+      expect(result).toEqual(['123456789']);
+    });
+  });
+
+  describe('formatRoleIdsForDisplay', () => {
+    it('joins role IDs with comma and space', () => {
+      const result = formatRoleIdsForDisplay(['123', '456', '789']);
+      expect(result).toBe('123, 456, 789');
+    });
+
+    it('returns empty string for empty array', () => {
+      const result = formatRoleIdsForDisplay([]);
+      expect(result).toBe('');
+    });
+
+    it('handles single role ID', () => {
+      const result = formatRoleIdsForDisplay(['123']);
+      expect(result).toBe('123');
+    });
+  });
+
+  describe('parseNewlineSeparatedList', () => {
+    it('parses newline-separated values', () => {
+      const result = parseNewlineSeparatedList('line1\nline2\nline3');
+      expect(result).toEqual(['line1', 'line2', 'line3']);
+    });
+
+    it('trims whitespace from each line', () => {
+      const result = parseNewlineSeparatedList('  line1  \n  line2  ');
+      expect(result).toEqual(['line1', 'line2']);
+    });
+
+    it('filters empty lines', () => {
+      const result = parseNewlineSeparatedList('line1\n\nline2\n\n');
+      expect(result).toEqual(['line1', 'line2']);
+    });
+
+    it('returns empty array for empty string', () => {
+      const result = parseNewlineSeparatedList('');
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe('parseNumberInput', () => {
+    it('parses valid number string', () => {
+      const result = parseNumberInput('42');
+      expect(result).toBe(42);
+    });
+
+    it('returns undefined for empty string', () => {
+      const result = parseNumberInput('');
+      expect(result).toBeUndefined();
+    });
+
+    it('returns undefined for non-numeric string', () => {
+      const result = parseNumberInput('abc');
+      expect(result).toBeUndefined();
+    });
+
+    it('returns undefined for NaN', () => {
+      const result = parseNumberInput('NaN');
+      expect(result).toBeUndefined();
+    });
+
+    it('clamps to minimum value', () => {
+      const result = parseNumberInput('5', 10);
+      expect(result).toBe(10);
+    });
+
+    it('clamps to maximum value', () => {
+      const result = parseNumberInput('100', 0, 50);
+      expect(result).toBe(50);
+    });
+
+    it('handles decimal numbers', () => {
+      const result = parseNumberInput('3.14');
+      expect(result).toBe(3.14);
+    });
+
+    it('handles negative numbers', () => {
+      const result = parseNumberInput('-10');
+      expect(result).toBe(-10);
+    });
+
+    it('clamps negative to min', () => {
+      const result = parseNumberInput('-10', 0);
+      expect(result).toBe(0);
+    });
+  });
+
+  describe('percentToDecimal', () => {
+    it('converts 100% to 1.0', () => {
+      expect(percentToDecimal(100)).toBe(1);
+    });
+
+    it('converts 50% to 0.5', () => {
+      expect(percentToDecimal(50)).toBe(0.5);
+    });
+
+    it('converts 0% to 0.0', () => {
+      expect(percentToDecimal(0)).toBe(0);
+    });
+
+    it('clamps values above 100', () => {
+      expect(percentToDecimal(150)).toBe(1);
+    });
+
+    it('clamps negative values', () => {
+      expect(percentToDecimal(-50)).toBe(0);
+    });
+
+    it('handles NaN as 0', () => {
+      expect(percentToDecimal(NaN)).toBe(0);
+    });
+  });
+
+  describe('decimalToPercent', () => {
+    it('converts 1.0 to 100%', () => {
+      expect(decimalToPercent(1)).toBe(100);
+    });
+
+    it('converts 0.5 to 50%', () => {
+      expect(decimalToPercent(0.5)).toBe(50);
+    });
+
+    it('converts 0.0 to 0%', () => {
+      expect(decimalToPercent(0)).toBe(0);
+    });
+
+    it('rounds to nearest integer', () => {
+      expect(decimalToPercent(0.333)).toBe(33);
+      expect(decimalToPercent(0.666)).toBe(67);
+    });
+  });
+
+  describe('normalizeOptionalString', () => {
+    it('trims whitespace', () => {
+      expect(normalizeOptionalString('  hello  ')).toBe('hello');
+    });
+
+    it('returns null for empty string', () => {
+      expect(normalizeOptionalString('')).toBeNull();
+    });
+
+    it('returns null for whitespace-only string', () => {
+      expect(normalizeOptionalString('   ')).toBeNull();
+    });
+
+    it('preserves non-empty strings', () => {
+      expect(normalizeOptionalString('channel-id-123')).toBe('channel-id-123');
+    });
+  });
+});
diff --git a/web/tests/lib/config-updates.test.ts b/web/tests/lib/config-updates.test.ts
new file mode 100644
index 000000000..90638e2d2
--- /dev/null
+++ b/web/tests/lib/config-updates.test.ts
@@ -0,0 +1,178 @@
+import { describe, expect, it } from 'vitest';
+import type { GuildConfig } from '@/lib/config-utils';
+import {
+  updateSectionEnabled,
+  updateSectionField,
+  updateNestedField,
+  updateArrayItem,
+  removeArrayItem,
+  appendArrayItem,
+} from '@/lib/config-updates';
+
+describe('config-updates', () => {
+  const baseConfig: GuildConfig = {
+    ai: { enabled: false, systemPrompt: '' },
+    welcome: {
+      enabled: true,
+      message: 'Hello!',
+      roleMenu: {
+        enabled: false,
+        options: [
+          { id: '1', label: 'Option 1', roleId: 'role-1' },
+          { id: '2', label: 'Option 2', roleId: 'role-2' },
+        ],
+      },
+    },
+    moderation: {
+      enabled: false,
+      rateLimit: {
+        enabled: true,
+        maxMessages: 10,
+      },
+    },
+  };
+
+  describe('updateSectionEnabled', () => {
+    it('updates section enabled flag', () => {
+      const result = updateSectionEnabled(baseConfig, 'ai', true);
+      expect(result.ai?.enabled).toBe(true);
+    });
+
+    it('preserves other section fields', () => {
+      const result = updateSectionEnabled(baseConfig, 'ai', true);
+      expect(result.ai?.systemPrompt).toBe('');
+    });
+
+    it('creates section if it does not exist', () => {
+      const config: GuildConfig = {};
+      const result = updateSectionEnabled(config, 'starboard', true);
+      expect(result.starboard?.enabled).toBe(true);
+    });
+
+    it('does not mutate original config', () => {
+      const original = { ...baseConfig };
+      updateSectionEnabled(baseConfig, 'ai', true);
+      expect(baseConfig.ai?.enabled).toBe(original.ai?.enabled);
+    });
+  });
+
+  describe('updateSectionField', () => {
+    it('updates a field within a section', () => {
+      const result = updateSectionField(baseConfig, 'welcome', 'message', 'New message');
+      expect(result.welcome?.message).toBe('New message');
+    });
+
+    it('preserves other fields in the section', () => {
+      const result = updateSectionField(baseConfig, 'welcome', 'message', 'New message');
+      expect(result.welcome?.enabled).toBe(true);
+    });
+
+    it('creates section if it does not exist', () => {
+      const config: GuildConfig = {};
+      const result = updateSectionField(config, 'permissions', 'adminRoleId', '123');
+      expect(result.permissions?.adminRoleId).toBe('123');
+    });
+  });
+
+  describe('updateNestedField', () => {
+    it('updates a nested field', () => {
+      const result = updateNestedField(baseConfig, 'moderation', 'rateLimit', 'maxMessages', 20);
+      expect(result.moderation?.rateLimit?.maxMessages).toBe(20);
+    });
+
+    it('preserves sibling nested fields', () => {
+      const result = updateNestedField(baseConfig, 'moderation', 'rateLimit', 'maxMessages', 20);
+      expect(result.moderation?.rateLimit?.enabled).toBe(true);
+    });
+
+    it('creates nested object if it does not exist', () => {
+      const config: GuildConfig = { moderation: { enabled: true } };
+      const result = updateNestedField(config, 'moderation', 'linkFilter', 'enabled', true);
+      expect(result.moderation?.linkFilter?.enabled).toBe(true);
+    });
+  });
+
+  describe('updateArrayItem', () => {
+    it('updates an item at specified index', () => {
+      const newOption = { id: '1', label: 'Updated', roleId: 'role-1' };
+      const result = updateArrayItem(
+        baseConfig,
+        'welcome',
+        ['roleMenu', 'options'],
+        0,
+        newOption,
+      );
+      expect(result.welcome?.roleMenu?.options?.[0]).toEqual(newOption);
+    });
+
+    it('preserves other array items', () => {
+      const newOption = { id: '1', label: 'Updated', roleId: 'role-1' };
+      const result = updateArrayItem(
+        baseConfig,
+        'welcome',
+        ['roleMenu', 'options'],
+        0,
+        newOption,
+      );
+      expect(result.welcome?.roleMenu?.options?.[1]).toEqual(baseConfig.welcome?.roleMenu?.options?.[1]);
+    });
+
+    it('creates array if it does not exist', () => {
+      const config: GuildConfig = { welcome: { enabled: true } };
+      const newOption = { id: '1', label: 'New', roleId: 'role-1' };
+      const result = updateArrayItem(config, 'welcome', ['roleMenu', 'options'], 0, newOption);
+      expect(result.welcome?.roleMenu?.options).toHaveLength(1);
+      expect(result.welcome?.roleMenu?.options?.[0]).toEqual(newOption);
+    });
+  });
+
+  describe('removeArrayItem', () => {
+    it('removes item at specified index', () => {
+      const result = removeArrayItem(baseConfig, 'welcome', ['roleMenu', 'options'], 0);
+      expect(result.welcome?.roleMenu?.options).toHaveLength(1);
+      expect(result.welcome?.roleMenu?.options?.[0].id).toBe('2');
+    });
+
+    it('handles removing last item', () => {
+      const config: GuildConfig = {
+        welcome: {
+          roleMenu: {
+            options: [{ id: '1', label: 'Only', roleId: 'role-1' }],
+          },
+        },
+      };
+      const result = removeArrayItem(config, 'welcome', ['roleMenu', 'options'], 0);
+      expect(result.welcome?.roleMenu?.options).toHaveLength(0);
+    });
+
+    it('handles empty array gracefully', () => {
+      const config: GuildConfig = { welcome: { roleMenu: { options: [] } } };
+      const result = removeArrayItem(config, 'welcome', ['roleMenu', 'options'], 0);
+      expect(result.welcome?.roleMenu?.options).toHaveLength(0);
+    });
+  });
+
+  describe('appendArrayItem', () => {
+    it('appends item to array', () => {
+      const newOption = { id: '3', label: 'Option 3', roleId: 'role-3' };
+      const result = appendArrayItem(baseConfig, 'welcome', ['roleMenu', 'options'], newOption);
+      expect(result.welcome?.roleMenu?.options).toHaveLength(3);
+      expect(result.welcome?.roleMenu?.options?.[2]).toEqual(newOption);
+    });
+
+    it('creates array if it does not exist', () => {
+      const config: GuildConfig = { welcome: { enabled: true } };
+      const newOption = { id: '1', label: 'First', roleId: 'role-1' };
+      const result = appendArrayItem(config, 'welcome', ['roleMenu', 'options'], newOption);
+      expect(result.welcome?.roleMenu?.options).toHaveLength(1);
+      expect(result.welcome?.roleMenu?.options?.[0]).toEqual(newOption);
+    });
+
+    it('preserves existing items', () => {
+      const newOption = { id: '3', label: 'Option 3', roleId: 'role-3' };
+      const result = appendArrayItem(baseConfig, 'welcome', ['roleMenu', 'options'], newOption);
+      expect(result.welcome?.roleMenu?.options?.[0]).toEqual(baseConfig.welcome?.roleMenu?.options?.[0]);
+      expect(result.welcome?.roleMenu?.options?.[1]).toEqual(baseConfig.welcome?.roleMenu?.options?.[1]);
+    });
+  });
+});