Log actions alongside state updates in ServerSettingsForm stories

Each handler now both updates local state (so the UI reacts) and
calls a Storybook fn() spy (so the Actions panel logs every
callback with its arguments).

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

clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 import {
   ServerSettingsForm,
   type ServerSettingsSection,
@@ -14,6 +15,16 @@ const defaultSettings: InspectorServerSettings = {
   requestTimeout: 60000,
 };
 
+const onConnectionModeChange = fn();
+const onAddHeader = fn();
+const onRemoveHeader = fn();
+const onHeaderChange = fn();
+const onAddMetadata = fn();
+const onRemoveMetadata = fn();
+const onMetadataChange = fn();
+const onTimeoutChange = fn();
+const onOAuthChange = fn();
+
 function InteractiveForm({
   startSettings,
   initialSections = ["connectionMode"],
@@ -31,50 +42,58 @@ function InteractiveForm({
       settings={settings}
       expandedSections={expandedSections}
       onExpandedSectionsChange={setExpandedSections}
-      onConnectionModeChange={(mode) =>
-        setSettings((s) => ({ ...s, connectionMode: mode }))
-      }
-      onAddHeader={() =>
+      onConnectionModeChange={(mode) => {
+        setSettings((s) => ({ ...s, connectionMode: mode }));
+        onConnectionModeChange(mode);
+      }}
+      onAddHeader={() => {
         setSettings((s) => ({
           ...s,
           headers: [...s.headers, { key: "", value: "" }],
-        }))
-      }
-      onRemoveHeader={(index) =>
+        }));
+        onAddHeader();
+      }}
+      onRemoveHeader={(index) => {
         setSettings((s) => ({
           ...s,
           headers: s.headers.filter((_, i) => i !== index),
-        }))
-      }
-      onHeaderChange={(index, key, value) =>
+        }));
+        onRemoveHeader(index);
+      }}
+      onHeaderChange={(index, key, value) => {
         setSettings((s) => ({
           ...s,
           headers: s.headers.map((h, i) => (i === index ? { key, value } : h)),
-        }))
-      }
-      onAddMetadata={() =>
+        }));
+        onHeaderChange(index, key, value);
+      }}
+      onAddMetadata={() => {
         setSettings((s) => ({
           ...s,
           metadata: [...s.metadata, { key: "", value: "" }],
-        }))
-      }
-      onRemoveMetadata={(index) =>
+        }));
+        onAddMetadata();
+      }}
+      onRemoveMetadata={(index) => {
         setSettings((s) => ({
           ...s,
           metadata: s.metadata.filter((_, i) => i !== index),
-        }))
-      }
-      onMetadataChange={(index, key, value) =>
+        }));
+        onRemoveMetadata(index);
+      }}
+      onMetadataChange={(index, key, value) => {
         setSettings((s) => ({
           ...s,
           metadata: s.metadata.map((m, i) =>
             i === index ? { key, value } : m,
           ),
-        }))
-      }
-      onTimeoutChange={(field, value) =>
-        setSettings((s) => ({ ...s, [field]: value }))
-      }
+        }));
+        onMetadataChange(index, key, value);
+      }}
+      onTimeoutChange={(field, value) => {
+        setSettings((s) => ({ ...s, [field]: value }));
+        onTimeoutChange(field, value);
+      }}
       onOAuthChange={(field, value) => {
         const fieldMap: Record<string, string> = {
           clientId: "oauthClientId",
@@ -82,6 +101,7 @@ function InteractiveForm({
           scopes: "oauthScopes",
         };
         setSettings((s) => ({ ...s, [fieldMap[field] ?? field]: value }));
+        onOAuthChange(field, value);
       }}
     />
   );