fix: Complete remaining PR #244 review comments

UX Regressions (CRITICAL):
- Restore ChannelSelector in StarboardSection for starboard channel

Mobile Responsive:
- ChallengesSection: Use responsive col-span (col-span-1 md:col-span-2)
- ModerationSection: Use grid-cols-1 md:grid-cols-2 for rate limit grid
- ModerationSection: Use grid-cols-1 md:grid-cols-3 for mute settings grid
- ReputationSection: Use grid-cols-1 md:grid-cols-2 for XP settings

Input Normalization:
- StarboardSection: Add raw buffer + blur pattern for ignored channels
- TriageSection: Trim whitespace for moderation log channel (already done)

Code Quality:
- EngagementSection: Refactor activityBadges updater with updateBadge helper
- EngagementSection: Add accessible names to all form controls
- EngagementSection: Fix badge row key collision (use days-label composite key)
- AiAutoModSection: Handle partial config sibling categories with defaults
- config-updates.ts: Guard array cloning against non-array values
- config-updates.ts: Validate array index bounds in update/remove/append

All tests pass (3628 passed, 2 skipped).

Author: Bill

web/src/components/dashboard/config-sections/AiAutoModSection.tsx

@@ -31,8 +31,19 @@ export function AiAutoModSection({ draftConfig, saving, onFieldChange }: AiAutoM
       flagChannelId: null,
       autoDelete: true,
     } as const);
-  const thresholds = (draftConfig.aiAutoMod?.thresholds as Record<string, number>) ?? {};
-  const actions = (draftConfig.aiAutoMod?.actions as Record<string, string>) ?? {};
+  // Ensure all categories are present even with partial config
+  const thresholds: Record<string, number> = {
+    toxicity: 0.7,
+    spam: 0.7,
+    harassment: 0.7,
+    ...((draftConfig.aiAutoMod?.thresholds as Record<string, number>) ?? {}),
+  };
+  const actions: Record<string, string> = {
+    toxicity: 'flag',
+    spam: 'flag',
+    harassment: 'flag',
+    ...((draftConfig.aiAutoMod?.actions as Record<string, string>) ?? {}),
+  };
 
   return (
     <Card>

web/src/components/dashboard/config-sections/ChallengesSection.tsx

@@ -66,7 +66,7 @@ export function ChallengesSection({
               placeholder="09:00"
             />
           </label>
-          <label className="space-y-2 col-span-2">
+          <label className="space-y-2 col-span-1 md:col-span-2">
             <span className="text-sm font-medium">Timezone</span>
             <input
               type="text"

web/src/components/dashboard/config-sections/EngagementSection.tsx

@@ -30,6 +30,12 @@ export function EngagementSection({
 }: EngagementSectionProps) {
   const badges = draftConfig.engagement?.activityBadges ?? [...DEFAULT_ACTIVITY_BADGES];
 
+  const updateBadge = (index: number, updates: Partial<{ days: number; label: string }>) => {
+    const newBadges = [...badges];
+    newBadges[index] = { ...newBadges[index], ...updates };
+    onActivityBadgesChange(newBadges);
+  };
+
   return (
     <Card>
       <CardContent className="space-y-4 pt-6">
@@ -39,32 +45,27 @@ export function EngagementSection({
           active days.
         </p>
         {badges.map((badge, i) => (
-          <div key={`badge-${i}`} className="flex items-center gap-2">
+          <div key={`${badge.days}-${badge.label}`} 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);
+                updateBadge(i, { days: Math.max(0, parseInt(e.target.value, 10) || 0) });
               }}
               disabled={saving}
+              aria-label={`Badge ${i + 1} minimum days`}
             />
             <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);
+                updateBadge(i, { label: e.target.value });
               }}
               disabled={saving}
+              aria-label={`Badge ${i + 1} label`}
             />
             <Button
               variant="ghost"
@@ -74,6 +75,7 @@ export function EngagementSection({
                 onActivityBadgesChange(newBadges);
               }}
               disabled={saving || badges.length <= 1}
+              aria-label={`Remove badge ${i + 1}`}
             >
               ✕
             </Button>

web/src/components/dashboard/config-sections/ModerationSection.tsx

@@ -148,7 +148,7 @@ export function ModerationSection({
               label="Rate Limiting"
             />
           </div>
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <label htmlFor="max-messages" className="space-y-2">
               <span className="text-sm text-muted-foreground">Max Messages</span>
               <input
@@ -180,7 +180,7 @@ export function ModerationSection({
               />
             </label>
           </div>
-          <div className="grid grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
             <label htmlFor="mute-after-triggers" className="space-y-2">
               <span className="text-sm text-muted-foreground">Mute After Triggers</span>
               <input

web/src/components/dashboard/config-sections/ReputationSection.tsx

@@ -52,7 +52,7 @@ export function ReputationSection({
             label="Reputation"
           />
         </div>
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
           <label htmlFor="xp-per-message-min" className="space-y-2">
             <span className="text-sm font-medium">XP per Message (min)</span>
             <input

web/src/components/dashboard/config-sections/StarboardSection.tsx

@@ -24,7 +24,19 @@ const inputClasses =
  * Provides controls for pinning popular messages to a starboard channel,
  * including threshold, emoji settings, and ignored channels.
  */
-export function StarboardSection({ draftConfig, guildId, saving, onFieldChange }: StarboardSectionProps) {
+export function StarboardSection({
+  draftConfig,
+  guildId,
+  saving,
+  onFieldChange,
+}: StarboardSectionProps) {
+  // Local state for ignored channels raw input (parsed on blur)
+  const ignoredChannelsDisplay = (draftConfig.starboard?.ignoredChannels ?? []).join(', ');
+  const [ignoredChannelsRaw, setIgnoredChannelsRaw] = useState(ignoredChannelsDisplay);
+  useEffect(() => {
+    setIgnoredChannelsRaw(ignoredChannelsDisplay);
+  }, [ignoredChannelsDisplay]);
+
   return (
     <Card>
       <CardHeader>
@@ -42,18 +54,21 @@ export function StarboardSection({ draftConfig, guildId, saving, onFieldChange }
         </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="space-y-2">
+          <span className="text-sm font-medium">Starboard Channel</span>
+          {guildId ? (
+            <ChannelSelector
+              guildId={guildId}
+              selected={draftConfig.starboard?.channelId ? [draftConfig.starboard.channelId] : []}
+              onChange={(selected) => onFieldChange('channelId', selected[0] ?? null)}
+              placeholder="Select starboard channel..."
+              disabled={saving}
+              maxSelections={1}
+            />
+          ) : (
+            <p className="text-muted-foreground text-sm">Select a server first</p>
+          )}
+        </div>
         <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>
@@ -115,16 +130,28 @@ export function StarboardSection({ draftConfig, guildId, saving, onFieldChange }
           <input
             id="ignored-channels"
             type="text"
-            value={(draftConfig.starboard?.ignoredChannels ?? []).join(', ')}
-            onChange={(e) =>
+            value={ignoredChannelsRaw}
+            onChange={(e) => {
+              const raw = e.target.value;
+              setIgnoredChannelsRaw(raw);
+              // Call onFieldChange on every change to prevent Ctrl+S data loss
               onFieldChange(
                 'ignoredChannels',
-                e.target.value
+                raw
                   .split(',')
                   .map((s) => s.trim())
                   .filter(Boolean),
-              )
-            }
+              );
+            }}
+            onBlur={() => {
+              // Normalize on blur
+              const normalized = ignoredChannelsRaw
+                .split(',')
+                .map((s) => s.trim())
+                .filter(Boolean)
+                .join(', ');
+              setIgnoredChannelsRaw(normalized);
+            }}
             disabled={saving}
             className={inputClasses}
             placeholder="Comma-separated channel IDs"

web/src/components/dashboard/config-sections/WelcomeSection.tsx

@@ -97,7 +97,9 @@ export function WelcomeSection({
             {guildId ? (
               <ChannelSelector
                 guildId={guildId}
-                selected={draftConfig.welcome?.rulesChannel ? [draftConfig.welcome.rulesChannel] : []}
+                selected={
+                  draftConfig.welcome?.rulesChannel ? [draftConfig.welcome.rulesChannel] : []
+                }
                 onChange={(selected) => onFieldChange('rulesChannel', selected[0] ?? null)}
                 placeholder="Select rules channel..."
                 disabled={saving}
@@ -112,7 +114,9 @@ export function WelcomeSection({
             {guildId ? (
               <RoleSelector
                 guildId={guildId}
-                selected={draftConfig.welcome?.verifiedRole ? [draftConfig.welcome.verifiedRole] : []}
+                selected={
+                  draftConfig.welcome?.verifiedRole ? [draftConfig.welcome.verifiedRole] : []
+                }
                 onChange={(selected) => onFieldChange('verifiedRole', selected[0] ?? null)}
                 placeholder="Select verified role..."
                 disabled={saving}
@@ -127,7 +131,9 @@ export function WelcomeSection({
             {guildId ? (
               <ChannelSelector
                 guildId={guildId}
-                selected={draftConfig.welcome?.introChannel ? [draftConfig.welcome.introChannel] : []}
+                selected={
+                  draftConfig.welcome?.introChannel ? [draftConfig.welcome.introChannel] : []
+                }
                 onChange={(selected) => onFieldChange('introChannel', selected[0] ?? null)}
                 placeholder="Select intro channel..."
                 disabled={saving}

web/src/lib/config-updates.ts

@@ -117,8 +117,9 @@ export function updateArrayItem<T>(
   }
 
   const lastKey = path[path.length - 1];
-  const existing = (cursor[lastKey] as T[]) || [];
-  const arr = [...existing];
+  const existing = cursor[lastKey];
+  // Guard against non-array values
+  const arr = Array.isArray(existing) ? [...existing] : [];
   if (index < 0 || index >= arr.length) {
     return config;
   }
@@ -166,8 +167,9 @@ export function removeArrayItem(
   }
 
   const lastKey = path[path.length - 1];
-  const existing = (cursor[lastKey] as unknown[]) || [];
-  const arr = [...existing];
+  const existing = cursor[lastKey];
+  // Guard against non-array values
+  const arr = Array.isArray(existing) ? [...existing] : [];
   if (index < 0 || index >= arr.length) {
     return config;
   }
@@ -215,7 +217,9 @@ export function appendArrayItem<T>(
   }
 
   const lastKey = path[path.length - 1];
-  const arr = [...((cursor[lastKey] as T[]) || []), item];
+  const existing = cursor[lastKey];
+  // Guard against non-array values
+  const arr = [...(Array.isArray(existing) ? existing : []), item];
 
   // Rebuild from bottom up using tracked levels
   let rebuilt: Record<string, unknown> = { ...cursor, [lastKey]: arr };