fix: address PR #244 review comments

web/src/components/dashboard/config-editor.tsx

@@ -392,9 +392,10 @@ export function ConfigEditor() {
   }, [guildId, savedConfig, draftConfig, hasValidationErrors, fetchConfig]);
 
   // 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(() => {

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

@@ -41,7 +41,7 @@ export function ChallengesSection({
         <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">
+        <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

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

@@ -1,5 +1,6 @@
 '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 { Input } from '@/components/ui/input';
@@ -47,6 +48,16 @@ export function ModerationSection({
   onProtectRolesChange,
   onProtectRoleIdsRawChange,
 }: ModerationSectionProps) {
+  // 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 ?? '';
@@ -235,11 +246,12 @@ export function ModerationSection({
             <input
               id="blocked-domains"
               type="text"
-              value={(draftConfig.moderation?.linkFilter?.blockedDomains ?? []).join(', ')}
-              onChange={(e) =>
+              value={blockedDomainsRaw}
+              onChange={(e) => setBlockedDomainsRaw(e.target.value)}
+              onBlur={() =>
                 onLinkFilterChange(
                   'blockedDomains',
-                  e.target.value
+                  blockedDomainsRaw
                     .split(',')
                     .map((s) => s.trim())
                     .filter(Boolean),

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

@@ -1,5 +1,6 @@
 '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';
@@ -27,6 +28,13 @@ export function PermissionsSection({
   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>
@@ -79,11 +87,12 @@ export function PermissionsSection({
           <input
             id="bot-owners"
             type="text"
-            value={(draftConfig.permissions?.botOwners ?? []).join(', ')}
-            onChange={(e) =>
+            value={botOwnersRaw}
+            onChange={(e) => setBotOwnersRaw(e.target.value)}
+            onBlur={() =>
               onFieldChange(
                 'botOwners',
-                e.target.value
+                botOwnersRaw
                   .split(',')
                   .map((s) => s.trim())
                   .filter(Boolean),

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

@@ -1,5 +1,6 @@
 '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';
@@ -32,6 +33,13 @@ export function ReputationSection({
   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">
@@ -116,9 +124,10 @@ export function ReputationSection({
           <input
             id="level-thresholds-comma-separated"
             type="text"
-            value={levelThresholds.join(', ')}
-            onChange={(e) => {
-              const nums = e.target.value
+            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);

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

@@ -51,7 +51,7 @@ export function StarboardSection({ draftConfig, saving, onFieldChange }: Starboa
             placeholder="Starboard channel ID"
           />
         </label>
-        <div className="grid grid-cols-2 gap-4">
+        <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

web/src/lib/config-updates.ts

@@ -104,31 +104,31 @@ export function updateArrayItem<T>(
 ): GuildConfig {
   const sectionData = (config[section] as Record<string, unknown>) || {};
 
-  // Navigate to the parent of the target array
-  let target: Record<string, unknown> = sectionData;
+  // 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++) {
-    target = (target[path[i]] as Record<string, unknown>) || {};
+    const next = (cursor[path[i]] as Record<string, unknown>) || {};
+    levels.push(next);
+    cursor = next;
   }
 
   const lastKey = path[path.length - 1];
-  const arr = [...((target[lastKey] as T[]) || [])];
+  const arr = [...((cursor[lastKey] as T[]) || [])];
   arr[index] = item;
 
-  // Rebuild the nested structure
-  const buildPath = (depth: number): Record<string, unknown> => {
-    if (depth === path.length - 1) {
-      return { ...target, [lastKey]: arr };
-    }
-    const key = path[depth];
-    return {
-      ...(depth === 0 ? sectionData : target),
-      [key]: buildPath(depth + 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]: buildPath(0),
+    [section]: rebuilt,
   } as GuildConfig;
 }
 
@@ -149,31 +149,31 @@ export function removeArrayItem(
 ): GuildConfig {
   const sectionData = (config[section] as Record<string, unknown>) || {};
 
-  // Navigate to the parent of the target array
-  let target: Record<string, unknown> = sectionData;
+  // 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++) {
-    target = (target[path[i]] as Record<string, unknown>) || {};
+    const next = (cursor[path[i]] as Record<string, unknown>) || {};
+    levels.push(next);
+    cursor = next;
   }
 
   const lastKey = path[path.length - 1];
-  const arr = [...((target[lastKey] as unknown[]) || [])];
+  const arr = [...((cursor[lastKey] as unknown[]) || [])];
   arr.splice(index, 1);
 
-  // Rebuild the nested structure
-  const buildPath = (depth: number): Record<string, unknown> => {
-    if (depth === path.length - 1) {
-      return { ...target, [lastKey]: arr };
-    }
-    const key = path[depth];
-    return {
-      ...(depth === 0 ? sectionData : target),
-      [key]: buildPath(depth + 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]: buildPath(0),
+    [section]: rebuilt,
   } as GuildConfig;
 }
 
@@ -194,29 +194,29 @@ export function appendArrayItem<T>(
 ): GuildConfig {
   const sectionData = (config[section] as Record<string, unknown>) || {};
 
-  // Navigate to the parent of the target array
-  let target: Record<string, unknown> = sectionData;
+  // 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++) {
-    target = (target[path[i]] as Record<string, unknown>) || {};
+    const next = (cursor[path[i]] as Record<string, unknown>) || {};
+    levels.push(next);
+    cursor = next;
   }
 
   const lastKey = path[path.length - 1];
-  const arr = [...((target[lastKey] as T[]) || []), item];
-
-  // Rebuild the nested structure
-  const buildPath = (depth: number): Record<string, unknown> => {
-    if (depth === path.length - 1) {
-      return { ...target, [lastKey]: arr };
-    }
-    const key = path[depth];
-    return {
-      ...(depth === 0 ? sectionData : target),
-      [key]: buildPath(depth + 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]: buildPath(0),
+    [section]: rebuilt,
   } as GuildConfig;
 }