@nextclaw/ui 0.12.1 → 0.12.3

package/src/components/chat/useChatSessionTypeState.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
-import type { ChatSessionTypeOptionView, SessionEntryView } from '@/api/types';
+import type { AgentProfileView, ChatSessionTypeOptionView, SessionEntryView } from '@/api/types';
 import { t } from '@/lib/i18n';
 
 export const DEFAULT_SESSION_TYPE = 'native';
@@ -39,6 +39,14 @@ export function normalizeSessionType(value: unknown): string {
   return normalized || DEFAULT_SESSION_TYPE;
 }
 
+export function resolveAgentRuntimeSessionType(
+  agent: Pick<AgentProfileView, 'runtime' | 'engine'> | null | undefined,
+  fallbackSessionType: string = DEFAULT_SESSION_TYPE
+): string {
+  const runtime = agent?.runtime?.trim() || agent?.engine?.trim() || fallbackSessionType;
+  return normalizeSessionType(runtime);
+}
+
 export function resolveSessionTypeLabel(sessionType: string, fallbackLabel?: string): string {
   if (sessionType === 'native') {
     return t('chatSessionTypeNative');
@@ -55,7 +63,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) => {

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

@@ -1,6 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ModelConfig } from '@/components/config/ModelConfig';
+import { setLanguage } from '@/lib/i18n';
 
 const mocks = vi.hoisted(() => ({
   mutate: vi.fn(),
@@ -56,6 +57,34 @@ vi.mock('@/hooks/useConfig', () => ({
 describe('ModelConfig', () => {
   beforeEach(() => {
     mocks.mutate.mockReset();
+    setLanguage('en');
+    mocks.configQuery.data = {
+      agents: {
+        defaults: {
+          model: 'openai/gpt-5.2',
+          workspace: '~/old-workspace'
+        }
+      },
+      providers: {
+        openai: {
+          enabled: true,
+          apiKeySet: true,
+          models: ['gpt-5.2']
+        }
+      }
+    };
+    mocks.metaQuery.data = {
+      providers: [
+        {
+          name: 'openai',
+          displayName: 'OpenAI',
+          modelPrefix: 'openai',
+          defaultModels: ['openai/gpt-5.2'],
+          keywords: [],
+          envKey: 'OPENAI_API_KEY'
+        }
+      ]
+    };
   });
 
   it('submits the workspace together with the selected model', async () => {
@@ -75,4 +104,36 @@ describe('ModelConfig', () => {
       });
     });
   });
+
+  it('shows a clear empty state and still allows manual model input when no providers are configured', async () => {
+    const user = userEvent.setup();
+    mocks.configQuery.data = {
+      agents: {
+        defaults: {
+          model: '',
+          workspace: '~/workspace'
+        }
+      },
+      providers: {}
+    } as typeof mocks.configQuery.data;
+    mocks.metaQuery.data = {
+      providers: []
+    } as typeof mocks.metaQuery.data;
+
+    render(<ModelConfig />);
+
+    expect(await screen.findByText('No providers configured')).toBeTruthy();
+    expect(screen.getByText('Add an AI provider to start using the platform.')).toBeTruthy();
+
+    const modelInput = screen.getByPlaceholderText('provider/model');
+    await user.type(modelInput, 'openai/gpt-5.1');
+    await user.click(screen.getByRole('button', { name: /save/i }));
+
+    await waitFor(() => {
+      expect(mocks.mutate).toHaveBeenCalledWith({
+        model: 'openai/gpt-5.1',
+        workspace: '~/workspace'
+      });
+    });
+  });
 });

package/src/components/config/ModelConfig.tsx

@@ -3,30 +3,25 @@ import { Card } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { SearchableModelInput } from '@/components/common/SearchableModelInput';
+import { ProviderScopedModelInput } from '@/components/common/ProviderScopedModelInput';
 import { useConfig, useConfigMeta, useConfigSchema, useUpdateModel } from '@/hooks/useConfig';
 import { hintForPath } from '@/lib/config-hints';
 import { t } from '@/lib/i18n';
-import {
-  buildProviderModelCatalog,
-  composeProviderModel,
-  findProviderByModel,
-  toProviderLocalModel
-} from '@/lib/provider-models';
+import { buildProviderModelCatalog } from '@/lib/provider-models';
 import { PageLayout, PageHeader } from '@/components/layout/page-layout';
 import { DOCS_DEFAULT_BASE_URL } from '@/components/doc-browser/DocBrowserContext';
 import { BookOpen, Folder, Loader2, Sparkles } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 
+const DEFAULT_MODEL_INPUT_PLACEHOLDER = 'provider/model';
+
 export function ModelConfig() {
   const { data: config, isLoading } = useConfig();
   const { data: meta } = useConfigMeta();
   const { data: schema } = useConfigSchema();
   const updateModel = useUpdateModel();
 
-  const [providerName, setProviderName] = useState('');
-  const [modelId, setModelId] = useState('');
+  const [model, setModel] = useState('');
   const [workspace, setWorkspace] = useState('');
   const uiHints = schema?.uiHints;
   const modelHint = hintForPath('agents.defaults.model', uiHints);
@@ -37,66 +32,20 @@ export function ModelConfig() {
     [config, meta]
   );
 
-  const providerMap = useMemo(() => new Map(providerCatalog.map((provider) => [provider.name, provider])), [providerCatalog]);
-  const selectedProvider = providerMap.get(providerName);
-  const selectedProviderName = selectedProvider?.name ?? '';
-  const selectedProviderAliases = useMemo(() => selectedProvider?.aliases ?? [], [selectedProvider]);
-  const selectedProviderModels = useMemo(() => selectedProvider?.models ?? [], [selectedProvider]);
-
   useEffect(() => {
     if (!config?.agents?.defaults) {
       return;
     }
-    const currentModel = (config.agents.defaults.model || '').trim();
-    const matchedProvider = findProviderByModel(currentModel, providerCatalog);
-    const effectiveProvider = matchedProvider ?? '';
-    const aliases = providerMap.get(effectiveProvider)?.aliases ?? [];
-    setProviderName(effectiveProvider);
-    setModelId(effectiveProvider ? toProviderLocalModel(currentModel, aliases) : '');
+    setModel((config.agents.defaults.model || '').trim());
     setWorkspace(config.agents.defaults.workspace || '');
-  }, [config, providerCatalog, providerMap]);
-
-  const modelOptions = useMemo(() => {
-    const deduped = new Set<string>();
-    for (const modelName of selectedProviderModels) {
-      const trimmed = modelName.trim();
-      if (trimmed) {
-        deduped.add(trimmed);
-      }
-    }
-    return [...deduped];
-  }, [selectedProviderModels]);
-
-  const composedModel = useMemo(() => {
-    if (!selectedProvider) {
-      return '';
-    }
-    const normalizedModelId = toProviderLocalModel(modelId, selectedProviderAliases);
-    if (!normalizedModelId) {
-      return '';
-    }
-    return composeProviderModel(selectedProvider.prefix, normalizedModelId);
-  }, [modelId, selectedProvider, selectedProviderAliases]);
+  }, [config]);
 
   const modelHelpText = t('modelIdentifierHelp') || modelHint?.help || '';
 
-  const handleProviderChange = (nextProvider: string) => {
-    setProviderName(nextProvider);
-    setModelId('');
-  };
-
-  const handleModelChange = (nextModelId: string) => {
-    if (!selectedProvider) {
-      setModelId('');
-      return;
-    }
-    setModelId(toProviderLocalModel(nextModelId, selectedProviderAliases));
-  };
-
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     updateModel.mutate({
-      model: composedModel,
+      model,
       workspace
     });
   };
@@ -146,38 +95,14 @@ export function ModelConfig() {
               <Label htmlFor="model" className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
                 {modelHint?.label ?? 'Model Name'}
               </Label>
-              <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
-                <div className="sm:w-[38%] sm:min-w-[170px]">
-                  <Select value={selectedProviderName} onValueChange={handleProviderChange}>
-                    <SelectTrigger className="h-10 w-full rounded-xl">
-                      <SelectValue placeholder={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={selectedProviderName}
-                  id="model"
-                  value={modelId}
-                  onChange={handleModelChange}
-                  options={modelOptions}
-                  disabled={!selectedProviderName}
-                  placeholder={modelHint?.placeholder ?? 'gpt-5.1'}
-                  className="sm:flex-1"
-                  inputClassName="h-10 rounded-xl"
-                  emptyText={t('modelPickerNoOptions')}
-                  createText={t('modelPickerUseCustom')}
-                />
-              </div>
+              <ProviderScopedModelInput
+                id="model"
+                value={model}
+                onChange={setModel}
+                providerCatalog={providerCatalog}
+                modelPlaceholder={modelHint?.placeholder ?? DEFAULT_MODEL_INPUT_PLACEHOLDER}
+              />
               <p className="text-xs text-gray-400">{modelHelpText}</p>
-              <p className="text-xs text-gray-500">{t('modelInputCustomHint')}</p>
               <a
                 href={`${DOCS_DEFAULT_BASE_URL}/guide/model-selection`}
                 className="inline-flex items-center gap-1.5 text-xs text-primary hover:text-primary-hover transition-colors"

package/src/components/config/RuntimeConfig.tsx

@@ -245,8 +245,8 @@ export function RuntimeConfig() {
                   placeholder={t('modelOverridePlaceholder')}
                 />
                 <Input
-                  value={agent.engine ?? ''}
-                  onChange={(event) => updateAgent(index, { engine: event.target.value })}
+                  value={agent.runtime ?? agent.engine ?? ''}
+                  onChange={(event) => updateAgent(index, { runtime: event.target.value })}
                   placeholder={agentEngineHint?.label ?? t('engineOverridePlaceholder')}
                 />
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-2">