@nextclaw/ui 0.12.1 → 0.12.2

package/src/components/agents/AgentsPage.tsx

@@ -1,39 +1,29 @@
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useCreateAgent, useDeleteAgent, useAgents } from '@/hooks/agents/useAgents';
+import { useCreateAgent, useDeleteAgent, useAgents, useUpdateAgent } from '@/hooks/agents/useAgents';
+import { useConfig, useConfigMeta } from '@/hooks/useConfig';
+import type { AgentProfileView } from '@/api/types';
+import {
+  AgentCreateDialog,
+  AgentEditDialog,
+  type AgentCreateFormState,
+  type AgentEditFormState
+} from '@/components/agents/AgentDialogs';
+import {
+  buildSessionTypeOptions,
+  normalizeSessionType,
+  resolveSessionTypeLabel
+} from '@/components/chat/useChatSessionTypeState';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
 import { AgentAvatar } from '@/components/common/AgentAvatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
+import { useNcpChatSessionTypes } from '@/hooks/use-ncp-chat-session-types';
 import { PageLayout } from '@/components/layout/page-layout';
 import { t } from '@/lib/i18n';
+import { buildProviderModelCatalog } from '@/lib/provider-models';
 import { cn } from '@/lib/utils';
-import { Bot, House, MessageCircle, Plus, ShieldCheck, Sparkles, Trash2 } from 'lucide-react';
-
-type CreateFormState = {
-  id: string;
-  displayName: string;
-  description: string;
-  avatar: string;
-  home: string;
-};
-
-const EMPTY_FORM: CreateFormState = {
-  id: '',
-  displayName: '',
-  description: '',
-  avatar: '',
-  home: ''
-};
+import { Bot, House, MessageCircle, Pencil, Plus, ShieldCheck, Sparkles, Trash2 } from 'lucide-react';
 
 const CARD_TONES = [
   {
@@ -63,10 +53,14 @@ function resolveAgentTone(index: number, builtIn: boolean) {
 export function AgentsPage() {
   const navigate = useNavigate();
   const agentsQuery = useAgents();
+  const configQuery = useConfig();
+  const configMetaQuery = useConfigMeta();
+  const sessionTypesQuery = useNcpChatSessionTypes();
   const createAgent = useCreateAgent();
+  const updateAgent = useUpdateAgent();
   const deleteAgent = useDeleteAgent();
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-  const [form, setForm] = useState<CreateFormState>(EMPTY_FORM);
+  const [editingAgent, setEditingAgent] = useState<AgentProfileView | null>(null);
   const setSessionListSnapshot = useChatSessionListStore((state) => state.setSnapshot);
 
   const agents = useMemo(() => agentsQuery.data?.agents ?? [], [agentsQuery.data?.agents]);
@@ -79,21 +73,56 @@ export function AgentsPage() {
       ),
     [agents]
   );
+  const providerCatalog = useMemo(
+    () => buildProviderModelCatalog({ config: configQuery.data, meta: configMetaQuery.data, onlyConfigured: true }),
+    [configMetaQuery.data, configQuery.data]
+  );
+  const runtimeOptions = useMemo(
+    () => buildSessionTypeOptions(sessionTypesQuery.data?.options ?? []),
+    [sessionTypesQuery.data?.options]
+  );
+  const defaultRuntime = useMemo(
+    () => normalizeSessionType(sessionTypesQuery.data?.defaultType ?? 'native'),
+    [sessionTypesQuery.data?.defaultType]
+  );
+  const defaultRuntimeLabel = useMemo(
+    () => runtimeOptions.find((option) => option.value === defaultRuntime)?.label ?? resolveSessionTypeLabel(defaultRuntime),
+    [defaultRuntime, runtimeOptions]
+  );
 
-  const handleCreate = async () => {
+  const handleCreate = async (form: AgentCreateFormState) => {
     await createAgent.mutateAsync({
       data: {
         id: form.id,
         ...(form.displayName.trim() ? { displayName: form.displayName.trim() } : {}),
         ...(form.description.trim() ? { description: form.description.trim() } : {}),
         ...(form.avatar.trim() ? { avatar: form.avatar.trim() } : {}),
-        ...(form.home.trim() ? { home: form.home.trim() } : {})
+        ...(form.home.trim() ? { home: form.home.trim() } : {}),
+        ...(form.model.trim() ? { model: form.model.trim() } : {}),
+        ...(form.runtime.trim() ? { runtime: form.runtime.trim() } : {})
       }
     });
-    setForm(EMPTY_FORM);
     setIsCreateDialogOpen(false);
   };
 
+  const handleStartEdit = (agent: AgentProfileView) => {
+    setEditingAgent(agent);
+  };
+
+  const handleUpdate = async (agentId: string, form: AgentEditFormState) => {
+    await updateAgent.mutateAsync({
+      agentId,
+      data: {
+        displayName: form.displayName,
+        description: form.description,
+        avatar: form.avatar,
+        model: form.model,
+        ...(form.runtime.trim() ? { runtime: form.runtime.trim() } : { runtime: "" })
+      }
+    });
+    setEditingAgent(null);
+  };
+
   const startChatWithAgent = (agentId: string) => {
     setSessionListSnapshot({
       selectedAgentId: agentId,
@@ -178,6 +207,11 @@ export function AgentsPage() {
         ) : (
           sortedAgents.map((agent, index) => {
             const tone = resolveAgentTone(index, Boolean(agent.builtIn));
+            const runtimeValue = agent.runtime?.trim() || agent.engine?.trim() || '';
+            const runtimeLabel = runtimeValue
+              ? runtimeOptions.find((option) => option.value === normalizeSessionType(runtimeValue))?.label ??
+                resolveSessionTypeLabel(runtimeValue)
+              : defaultRuntimeLabel;
             return (
               <Card
                 key={agent.id}
@@ -223,6 +257,16 @@ export function AgentsPage() {
                   </p>
 
                   <div className="mt-auto flex flex-col gap-4">
+                    <div>
+                      <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-[#94a3b8]">
+                        <Sparkles className="h-3.5 w-3.5" />
+                        {t('agentsCardRuntimeLabel')}
+                      </div>
+                      <div className="mt-1.5 text-sm leading-6 text-[#475569]">
+                        {runtimeLabel}
+                      </div>
+                    </div>
+
                     <div className="border-t border-gray-100 pt-3">
                       <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-[#94a3b8]">
                         <House className="h-3.5 w-3.5" />
@@ -242,6 +286,16 @@ export function AgentsPage() {
                         <MessageCircle className="mr-2 h-4 w-4" />
                         {t('agentsCardStartChat')}
                       </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        className="h-8 rounded-xl px-3 text-xs text-[#7b8794] hover:bg-[#f3f4f6] hover:text-[#475569]"
+                        onClick={() => handleStartEdit(agent)}
+                        disabled={updateAgent.isPending}
+                      >
+                        <Pencil className="mr-1.5 h-3.5 w-3.5" />
+                        {t('agentsEditAction')}
+                      </Button>
                       {!agent.builtIn ? (
                         <Button
                           type="button"
@@ -263,91 +317,29 @@ export function AgentsPage() {
         )}
       </div>
 
-      <Dialog
+      <AgentCreateDialog
         open={isCreateDialogOpen}
+        pending={createAgent.isPending}
+        providerCatalog={providerCatalog}
+        runtimeOptions={runtimeOptions}
+        defaultRuntime={defaultRuntime}
+        onOpenChange={setIsCreateDialogOpen}
+        onSubmit={handleCreate}
+      />
+
+      <AgentEditDialog
+        agent={editingAgent}
+        pending={updateAgent.isPending}
+        providerCatalog={providerCatalog}
+        runtimeOptions={runtimeOptions}
+        defaultRuntime={defaultRuntime}
         onOpenChange={(open) => {
-          setIsCreateDialogOpen(open);
-          if (!open && !createAgent.isPending) {
-            setForm(EMPTY_FORM);
+          if (!open && !updateAgent.isPending) {
+            setEditingAgent(null);
           }
         }}
-      >
-        <DialogContent className="overflow-hidden border-none bg-[linear-gradient(180deg,#fff9f1_0%,#ffffff_24%)] p-0 sm:max-w-xl">
-          <div className="border-b border-[#f0e2c8] px-6 py-6">
-            <DialogHeader className="text-left">
-              <DialogTitle>{t('agentsCreateDialogTitle')}</DialogTitle>
-              <DialogDescription>{t('agentsCreateDialogDescription')}</DialogDescription>
-            </DialogHeader>
-          </div>
-          <div className="space-y-4 px-6 py-6">
-            <div className="grid gap-4 md:grid-cols-2">
-              <Input
-                value={form.id}
-                onChange={(event) =>
-                  setForm((prev) => ({ ...prev, id: event.target.value }))
-                }
-                placeholder={t('agentsFormIdPlaceholder')}
-              />
-              <Input
-                value={form.displayName}
-                onChange={(event) =>
-                  setForm((prev) => ({
-                    ...prev,
-                    displayName: event.target.value
-                  }))
-                }
-                placeholder={t('agentsFormNamePlaceholder')}
-              />
-              <Input
-                value={form.description}
-                onChange={(event) =>
-                  setForm((prev) => ({
-                    ...prev,
-                    description: event.target.value
-                  }))
-                }
-                placeholder={t('agentsFormDescriptionPlaceholder')}
-              />
-              <Input
-                value={form.avatar}
-                onChange={(event) =>
-                  setForm((prev) => ({ ...prev, avatar: event.target.value }))
-                }
-                placeholder={t('agentsFormAvatarPlaceholder')}
-              />
-              <Input
-                value={form.home}
-                onChange={(event) =>
-                  setForm((prev) => ({ ...prev, home: event.target.value }))
-                }
-                placeholder={t('agentsFormHomePlaceholder')}
-              />
-            </div>
-            <div className="rounded-2xl border border-[#efe3ca] bg-[#fff9ef] px-4 py-3 text-xs leading-6 text-[#7a6246]">
-              {t('agentsCreateDialogHint')}
-            </div>
-          </div>
-          <DialogFooter className="border-t border-[#f1e7d4] px-6 py-5">
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={() => setIsCreateDialogOpen(false)}
-              disabled={createAgent.isPending}
-            >
-              {t('cancel')}
-            </Button>
-            <Button
-              type="button"
-              className="rounded-2xl bg-[#1f5c4d] px-5 text-white hover:bg-[#184d40]"
-              onClick={() => void handleCreate()}
-              disabled={createAgent.isPending || form.id.trim().length === 0}
-            >
-              <Plus className="mr-2 h-4 w-4" />
-              {t('agentsCreateAction')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        onSubmit={handleUpdate}
+      />
     </PageLayout>
   );
 }

package/src/components/chat/ncp/NcpChatPage.tsx

@@ -57,6 +57,7 @@ export function buildNcpSendMetadata(payload: {
   }
   if (payload.sessionType?.trim()) {
     metadata.session_type = payload.sessionType.trim();
+    metadata.runtime = payload.sessionType.trim();
   }
   if (payload.agentId?.trim()) {
     metadata.agent_id = payload.agentId.trim();

package/src/components/chat/ncp/ncp-session-adapter.ts

@@ -85,7 +85,12 @@ function readNcpSessionType(summary: NcpSessionSummaryView): string {
   if (!metadata) {
     return 'native';
   }
-  return readOptionalString(metadata.session_type) ?? readOptionalString(metadata.sessionType) ?? 'native';
+  return (
+    readOptionalString(metadata.runtime) ??
+    readOptionalString(metadata.session_type) ??
+    readOptionalString(metadata.sessionType) ??
+    'native'
+  );
 }
 
 function readNcpParentSessionId(summary: NcpSessionSummaryView): string | null {

package/src/components/chat/useChatSessionTypeState.ts

@@ -55,7 +55,7 @@ export function resolveSessionTypeLabel(sessionType: string, fallbackLabel?: str
     .join(' ') || sessionType;
 }
 
-function buildSessionTypeOptions(
+export function buildSessionTypeOptions(
   options: ChatSessionTypeOptionView[]
 ): ChatSessionTypeOption[] {
   const deduped = new Map<string, ChatSessionTypeOption>();

package/src/components/common/ProviderScopedModelInput.tsx

@@ -0,0 +1,149 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { SearchableModelInput } from '@/components/common/SearchableModelInput';
+import { Input } from '@/components/ui/input';
+import type { ProviderModelCatalogItem } from '@/lib/provider-models';
+import { composeProviderModel, findProviderByModel, toProviderLocalModel } from '@/lib/provider-models';
+import { t } from '@/lib/i18n';
+
+type ProviderScopedModelInputProps = {
+  id?: string;
+  value: string;
+  onChange: (value: string) => void;
+  providerCatalog: ProviderModelCatalogItem[];
+  disabled?: boolean;
+  providerPlaceholder?: string;
+  modelPlaceholder?: string;
+  className?: string;
+};
+
+const DEFAULT_MODEL_INPUT_PLACEHOLDER = 'provider/model';
+
+function normalizeModelOptions(options: string[]): string[] {
+  const deduped = new Set<string>();
+  for (const option of options) {
+    const trimmed = option.trim();
+    if (trimmed) {
+      deduped.add(trimmed);
+    }
+  }
+  return [...deduped];
+}
+
+export function ProviderScopedModelInput({
+  id,
+  value,
+  onChange,
+  providerCatalog,
+  disabled = false,
+  providerPlaceholder,
+  modelPlaceholder,
+  className
+}: ProviderScopedModelInputProps) {
+  const [providerName, setProviderName] = useState('');
+  const [modelId, setModelId] = useState('');
+  const hasProviders = providerCatalog.length > 0;
+  const effectiveModelPlaceholder = modelPlaceholder ?? DEFAULT_MODEL_INPUT_PLACEHOLDER;
+
+  const providerMap = useMemo(
+    () => new Map(providerCatalog.map((provider) => [provider.name, provider])),
+    [providerCatalog]
+  );
+
+  const selectedProvider = providerMap.get(providerName);
+  const selectedProviderAliases = useMemo(() => selectedProvider?.aliases ?? [], [selectedProvider]);
+  const selectedProviderModels = useMemo(
+    () => normalizeModelOptions(selectedProvider?.models ?? []),
+    [selectedProvider]
+  );
+
+  useEffect(() => {
+    const currentModel = value.trim();
+    if (!hasProviders) {
+      setProviderName('');
+      setModelId(currentModel);
+      return;
+    }
+    const matchedProvider = findProviderByModel(currentModel, providerCatalog);
+    const effectiveProvider = matchedProvider ?? '';
+    const aliases = providerMap.get(effectiveProvider)?.aliases ?? [];
+    setProviderName(effectiveProvider);
+    setModelId(effectiveProvider ? toProviderLocalModel(currentModel, aliases) : currentModel);
+  }, [hasProviders, providerCatalog, providerMap, value]);
+
+  const handleProviderChange = (nextProvider: string) => {
+    setProviderName(nextProvider);
+    setModelId('');
+    onChange('');
+  };
+
+  const handleModelChange = (nextModelId: string) => {
+    if (!selectedProvider) {
+      const trimmed = nextModelId.trim();
+      setModelId(trimmed);
+      onChange(trimmed);
+      return;
+    }
+    const normalizedLocalModel = toProviderLocalModel(nextModelId, selectedProviderAliases);
+    setModelId(normalizedLocalModel);
+    onChange(normalizedLocalModel ? composeProviderModel(selectedProvider.prefix, normalizedLocalModel) : '');
+  };
+
+  if (!hasProviders) {
+    return (
+      <div className={className}>
+        <div className="rounded-2xl border border-amber-200 bg-amber-50/70 px-4 py-3">
+          <p className="text-sm font-semibold text-amber-950">{t('providersEmptyTitle')}</p>
+          <p className="mt-1 text-xs leading-5 text-amber-900">{t('providersEmptyDescription')}</p>
+        </div>
+        <Input
+          id={id}
+          value={value}
+          disabled={disabled}
+          onChange={(event) => onChange(event.target.value)}
+          placeholder={effectiveModelPlaceholder}
+          className="mt-3 h-10 rounded-xl"
+        />
+        <p className="mt-2 text-xs text-gray-500">{t('modelInputCustomHint')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+        <div className="sm:w-[38%] sm:min-w-[170px]">
+          <Select value={providerName} onValueChange={handleProviderChange} disabled={disabled}>
+            <SelectTrigger className="h-10 w-full rounded-xl">
+              <SelectValue placeholder={providerPlaceholder ?? t('providersSelectPlaceholder')} />
+            </SelectTrigger>
+            <SelectContent>
+              {providerCatalog.map((provider) => (
+                <SelectItem key={provider.name} value={provider.name}>
+                  {provider.displayName}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <span className="hidden h-10 items-center justify-center leading-none text-lg font-semibold text-gray-300 sm:inline-flex">
+          /
+        </span>
+        <SearchableModelInput
+          key={providerName}
+          id={id}
+          value={modelId}
+          onChange={handleModelChange}
+          options={selectedProviderModels}
+          disabled={disabled || !providerName}
+          placeholder={effectiveModelPlaceholder}
+          className="sm:flex-1"
+          inputClassName="h-10 rounded-xl"
+          emptyText={t('modelPickerNoOptions')}
+          createText={t('modelPickerUseCustom')}
+        />
+      </div>
+      <p className="mt-2 text-xs text-gray-500">{t('modelInputCustomHint')}</p>
+    </div>
+  );
+}

package/src/components/config/ChannelForm.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { ChannelForm } from './ChannelForm';
+
+vi.mock('@/hooks/useConfig', () => ({
+  useConfig: () => ({
+    data: {
+      channels: {
+        weixin: {
+          enabled: false
+        }
+      }
+    }
+  }),
+  useConfigMeta: () => ({
+    data: {
+      channels: [
+        {
+          name: 'weixin',
+          displayName: 'Weixin',
+          enabled: false
+        }
+      ]
+    }
+  }),
+  useConfigSchema: () => ({
+    data: {
+      uiHints: {},
+      actions: []
+    }
+  }),
+  useUpdateChannel: () => ({
+    mutate: vi.fn(),
+    mutateAsync: vi.fn(),
+    isPending: false
+  }),
+  useExecuteConfigAction: () => ({
+    mutateAsync: vi.fn(),
+    isPending: false
+  })
+}));
+
+describe('ChannelForm', () => {
+  it('renders the empty selection state without entering a render loop', async () => {
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(<ChannelForm />);
+
+    expect(await screen.findByText('Select a channel from the left to configure')).toBeTruthy();
+
+    await waitFor(() => {
+      expect(
+        consoleErrorSpy.mock.calls.some((call) =>
+          call.some((entry) => typeof entry === 'string' && entry.includes('Maximum update depth exceeded'))
+        )
+      ).toBe(false);
+    });
+
+    consoleErrorSpy.mockRestore();
+  });
+});

package/src/components/config/ChannelForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useConfig, useConfigMeta, useConfigSchema, useUpdateChannel, useExecuteConfigAction } from '@/hooks/useConfig';
 import { Button } from '@/components/ui/button';
 import { StatusDot } from '@/components/ui/status-dot';
@@ -20,6 +20,9 @@ type ChannelFormProps = {
   channelName?: string;
 };
 
+const EMPTY_CHANNEL_FIELDS: ChannelField[] = [];
+const DEFAULT_CHANNEL_LAYOUT_BLOCKS: ChannelFormBlock[] = [{ type: 'fields', section: 'all' }];
+
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -60,6 +63,31 @@ function resolveFieldsForSection(fields: ChannelField[], section: ChannelFormFie
   return fields.filter((field) => field.section !== 'primary');
 }
 
+function buildJsonDrafts(channelConfig: Record<string, unknown>, fields: ChannelField[]): Record<string, string> {
+  const nextDrafts: Record<string, string> = {};
+  fields
+    .filter((field) => field.type === 'json')
+    .forEach((field) => {
+      nextDrafts[field.name] = JSON.stringify(channelConfig[field.name] ?? {}, null, 2);
+    });
+  return nextDrafts;
+}
+
+function buildChannelFormHydrationKey(
+  channelName: string | undefined,
+  channelConfig: Record<string, unknown> | null | undefined,
+  fields: ChannelField[]
+): string {
+  if (!channelName || !channelConfig) {
+    return `empty:${channelName ?? ''}`;
+  }
+  return JSON.stringify({
+    channelName,
+    channelConfig,
+    jsonFields: fields.filter((field) => field.type === 'json').map((field) => field.name)
+  });
+}
+
 export function ChannelForm({ channelName }: ChannelFormProps) {
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
@@ -70,12 +98,13 @@ export function ChannelForm({ channelName }: ChannelFormProps) {
   const [formData, setFormData] = useState<Record<string, unknown>>({});
   const [jsonDrafts, setJsonDrafts] = useState<Record<string, string>>({});
   const [runningActionId, setRunningActionId] = useState<string | null>(null);
+  const lastHydrationKeyRef = useRef<string | null>(null);
 
   const channelConfig = channelName ? config?.channels[channelName] : null;
   const channelDefinitions = useMemo(() => buildChannelFormDefinitions(), []);
   const channelDefinition = channelName ? channelDefinitions[channelName] : undefined;
-  const fields = channelDefinition?.fields ?? [];
-  const layoutBlocks = channelDefinition?.layout ?? [{ type: 'fields', section: 'all' } satisfies ChannelFormBlock];
+  const fields = channelDefinition?.fields ?? EMPTY_CHANNEL_FIELDS;
+  const layoutBlocks = channelDefinition?.layout ?? DEFAULT_CHANNEL_LAYOUT_BLOCKS;
   const uiHints = schema?.uiHints;
   const scope = channelName ? `channels.${channelName}` : null;
   const actions = schema?.actions?.filter((action) => action.scope === scope) ?? [];
@@ -84,23 +113,22 @@ export function ChannelForm({ channelName }: ChannelFormProps) {
     : channelName;
   const channelMeta = meta?.channels.find((item) => item.name === channelName);
   const tutorialUrl = channelMeta ? resolveChannelTutorialUrl(channelMeta) : undefined;
+  const hydrationKey = buildChannelFormHydrationKey(channelName, channelConfig, fields);
 
   useEffect(() => {
+    if (lastHydrationKeyRef.current === hydrationKey) {
+      return;
+    }
+    lastHydrationKeyRef.current = hydrationKey;
+
     if (channelConfig) {
       setFormData({ ...channelConfig });
-      const nextDrafts: Record<string, string> = {};
-      fields
-        .filter((field) => field.type === 'json')
-        .forEach((field) => {
-          const value = channelConfig[field.name];
-          nextDrafts[field.name] = JSON.stringify(value ?? {}, null, 2);
-        });
-      setJsonDrafts(nextDrafts);
+      setJsonDrafts(buildJsonDrafts(channelConfig, fields));
     } else {
       setFormData({});
       setJsonDrafts({});
     }
-  }, [channelConfig, fields]);
+  }, [channelConfig, fields, hydrationKey]);
 
   const updateField = (name: string, value: unknown) => {
     setFormData((prev) => ({ ...prev, [name]: value }));
@@ -150,6 +178,18 @@ export function ChannelForm({ channelName }: ChannelFormProps) {
       return;
     }
     setFormData((prev) => deepMergeRecords(prev, channelPatch));
+    setJsonDrafts((prev) => {
+      let changed = false;
+      const nextDrafts = { ...prev };
+      for (const field of fields) {
+        if (field.type !== 'json' || !Object.prototype.hasOwnProperty.call(channelPatch, field.name)) {
+          continue;
+        }
+        nextDrafts[field.name] = JSON.stringify(channelPatch[field.name] ?? {}, null, 2);
+        changed = true;
+      }
+      return changed ? nextDrafts : prev;
+    });
   };
 
   const handleManualAction = async (action: ConfigActionManifest) => {