npm - @nextclaw/ui - Versions diffs - 0.5.33 → 0.5.35 - Mend

@nextclaw/ui 0.5.33 → 0.5.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/dist/index.html CHANGED Viewed

@@ -6,9 +6,9 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>NextClaw - 系统配置</title>
-  <script type="module" crossorigin src="/assets/index-C2-PvYBh.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-C8fQ0Vej.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-yypHrk9r.css">
+  <script type="module" crossorigin src="/assets/index-q2B1bssI.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-CmqkRoMs.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-B8Wh_FvS.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.5.33",
+  "version": "0.5.35",
   "private": false,
   "type": "module",
   "license": "MIT",

package/src/api/client.ts CHANGED Viewed

@@ -18,11 +18,36 @@ if (import.meta.env.DEV && !import.meta.env.VITE_API_BASE) {
 export { API_BASE };
+function compactSnippet(text: string): string {
+  return text.replace(/\s+/g, ' ').trim().slice(0, 200);
+}
+function inferNonJsonHint(endpoint: string, status: number): string | undefined {
+  if (
+    status === 404 &&
+    endpoint.startsWith('/api/config/providers/') &&
+    endpoint.endsWith('/test')
+  ) {
+    return 'Provider test endpoint is missing. This usually means nextclaw runtime version is outdated.';
+  }
+  if (status === 401 || status === 403) {
+    return 'Authentication failed. Check apiKey and custom headers.';
+  }
+  if (status === 429) {
+    return 'Rate limited by upstream provider. Retry later or switch model/provider.';
+  }
+  if (status >= 500) {
+    return 'Upstream service error. Retry later and inspect server logs if it persists.';
+  }
+  return undefined;
+}
 async function apiRequest<T>(
   endpoint: string,
   options: RequestInit = {}
 ): Promise<ApiResponse<T>> {
   const url = `${API_BASE}${endpoint}`;
+  const method = (options.method || 'GET').toUpperCase();
   const response = await fetch(url, {
     headers: {
@@ -43,9 +68,31 @@ async function apiRequest<T>(
   }
   if (!data) {
-    const snippet = text ? text.slice(0, 200) : '';
-    const message = `Non-JSON response (${response.status} ${response.statusText})${snippet ? `: ${snippet}` : ''}`;
-    return { ok: false, error: { code: 'INVALID_RESPONSE', message } };
+    const snippet = text ? compactSnippet(text) : '';
+    const hint = inferNonJsonHint(endpoint, response.status);
+    const parts = [`Non-JSON response (${response.status} ${response.statusText}) on ${method} ${endpoint}`];
+    if (snippet) {
+      parts.push(`body=${snippet}`);
+    }
+    if (hint) {
+      parts.push(`hint=${hint}`);
+    }
+    return {
+      ok: false,
+      error: {
+        code: 'INVALID_RESPONSE',
+        message: parts.join(' | '),
+        details: {
+          status: response.status,
+          statusText: response.statusText,
+          method,
+          endpoint,
+          url,
+          bodySnippet: snippet || undefined,
+          hint
+        }
+      }
+    };
   }
   if (!response.ok) {

package/src/api/types.ts CHANGED Viewed

@@ -15,6 +15,7 @@ export type ProviderConfigView = {
   apiBase?: string | null;
   extraHeaders?: Record<string, string> | null;
   wireApi?: "auto" | "chat" | "responses" | null;
+  models?: string[];
 };
 export type ProviderConfigUpdate = {
@@ -22,18 +23,36 @@ export type ProviderConfigUpdate = {
   apiBase?: string | null;
   extraHeaders?: Record<string, string> | null;
   wireApi?: "auto" | "chat" | "responses" | null;
+  models?: string[] | null;
 };
 export type ProviderConnectionTestRequest = ProviderConfigUpdate & {
   model?: string | null;
 };
+export type ProviderConnectionTestErrorCode =
+  | 'API_KEY_REQUIRED'
+  | 'MODEL_REQUIRED'
+  | 'AUTH_FAILED'
+  | 'PERMISSION_DENIED'
+  | 'RATE_LIMITED'
+  | 'MODEL_NOT_FOUND'
+  | 'INVALID_ENDPOINT'
+  | 'INVALID_REQUEST'
+  | 'NETWORK_ERROR'
+  | 'SERVER_ERROR'
+  | 'UNKNOWN_ERROR';
 export type ProviderConnectionTestResult = {
   success: boolean;
   provider: string;
   model?: string;
   latencyMs: number;
   message: string;
+  errorCode?: ProviderConnectionTestErrorCode;
+  httpStatus?: number;
+  endpoint?: string;
+  hint?: string;
 };
 export type AgentProfileView = {
@@ -306,11 +325,13 @@ export type ConfigView = {
 export type ProviderSpecView = {
   name: string;
   displayName?: string;
+  modelPrefix?: string;
   keywords: string[];
   envKey: string;
   isGateway?: boolean;
   isLocal?: boolean;
   defaultApiBase?: string;
+  defaultModels?: string[];
   supportsWireApi?: boolean;
   wireApiOptions?: Array<"auto" | "chat" | "responses">;
   defaultWireApi?: "auto" | "chat" | "responses";
@@ -321,6 +342,11 @@ export type ChannelSpecView = {
   displayName?: string;
   enabled: boolean;
   tutorialUrl?: string;
+  tutorialUrls?: {
+    default?: string;
+    en?: string;
+    zh?: string;
+  };
 };
 export type ConfigMetaView = {

package/src/components/common/SearchableModelInput.tsx ADDED Viewed

@@ -0,0 +1,156 @@
+import { useMemo, useState } from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+type SearchableModelInputProps = {
+  id?: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: string[];
+  placeholder?: string;
+  className?: string;
+  inputClassName?: string;
+  emptyText?: string;
+  createText?: string;
+  maxItems?: number;
+  onEnter?: () => void;
+};
+function normalizeOptions(options: string[]): string[] {
+  const deduped = new Set<string>();
+  for (const option of options) {
+    const trimmed = option.trim();
+    if (trimmed.length > 0) {
+      deduped.add(trimmed);
+    }
+  }
+  return [...deduped];
+}
+export function SearchableModelInput({
+  id,
+  value,
+  onChange,
+  options,
+  placeholder,
+  className,
+  inputClassName,
+  emptyText,
+  createText,
+  maxItems = Number.POSITIVE_INFINITY,
+  onEnter
+}: SearchableModelInputProps) {
+  const [open, setOpen] = useState(false);
+  const normalizedOptions = useMemo(() => normalizeOptions(options), [options]);
+  const query = value.trim().toLowerCase();
+  const orderedOptions = useMemo(() => {
+    const indexed = normalizedOptions.map((option, index) => ({ option, index }));
+    if (query.length > 0) {
+      indexed.sort((left, right) => {
+        const leftText = left.option.toLowerCase();
+        const rightText = right.option.toLowerCase();
+        const leftRank = leftText === query ? 0 : leftText.startsWith(query) ? 1 : leftText.includes(query) ? 2 : 3;
+        const rightRank =
+          rightText === query ? 0 : rightText.startsWith(query) ? 1 : rightText.includes(query) ? 2 : 3;
+        if (leftRank !== rightRank) {
+          return leftRank - rightRank;
+        }
+        return left.index - right.index;
+      });
+    }
+    const sorted = indexed.map((item) => item.option);
+    if (Number.isFinite(maxItems)) {
+      return sorted.slice(0, Math.max(1, maxItems));
+    }
+    return sorted;
+  }, [normalizedOptions, query, maxItems]);
+  const hasExactMatch = value.trim().length > 0 && normalizedOptions.some((option) => option === value.trim());
+  return (
+    <div
+      className={cn('relative', className)}
+      onBlur={() => {
+        setTimeout(() => setOpen(false), 120);
+      }}
+    >
+      <Input
+        id={id}
+        value={value}
+        onFocus={() => setOpen(true)}
+        onChange={(event) => {
+          onChange(event.target.value);
+          if (!open) {
+            setOpen(true);
+          }
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            if (onEnter) {
+              event.preventDefault();
+              onEnter();
+            }
+            setOpen(false);
+          }
+        }}
+        placeholder={placeholder}
+        className={cn('pr-10', inputClassName)}
+      />
+      <button
+        type="button"
+        onMouseDown={(event) => event.preventDefault()}
+        onClick={() => setOpen((prev) => !prev)}
+        className="absolute inset-y-0 right-0 inline-flex w-10 items-center justify-center text-gray-400 hover:text-gray-600"
+        aria-label="toggle model options"
+      >
+        <ChevronsUpDown className="h-4 w-4" />
+      </button>
+      {open && (
+        <div className="absolute z-20 mt-1 w-full overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
+          <div className="max-h-60 overflow-y-auto py-1">
+            {!hasExactMatch && value.trim().length > 0 && (
+              <button
+                type="button"
+                onMouseDown={(event) => event.preventDefault()}
+                onClick={() => {
+                  onChange(value.trim());
+                  setOpen(false);
+                }}
+                className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50"
+              >
+                <Check className="h-4 w-4 text-transparent" />
+                <span className="truncate text-gray-700">
+                  {createText ? createText.replace('{value}', value.trim()) : value.trim()}
+                </span>
+              </button>
+            )}
+            {orderedOptions.map((option) => (
+              <button
+                key={option}
+                type="button"
+                onMouseDown={(event) => event.preventDefault()}
+                onClick={() => {
+                  onChange(option);
+                  setOpen(false);
+                }}
+                className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50"
+              >
+                <Check className={cn('h-4 w-4', option === value.trim() ? 'text-primary' : 'text-transparent')} />
+                <span className="truncate text-gray-700">{option}</span>
+              </button>
+            ))}
+            {orderedOptions.length === 0 && value.trim().length === 0 && (
+              <div className="px-3 py-2 text-sm text-gray-500">{emptyText ?? 'No models available'}</div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/config/ChannelForm.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useConfig, useConfigSchema, useUpdateChannel, useExecuteConfigAction } from '@/hooks/useConfig';
+import { useConfig, useConfigMeta, useConfigSchema, useUpdateChannel, useExecuteConfigAction } from '@/hooks/useConfig';
 import { useUiStore } from '@/stores/ui.store';
 import {
   Dialog,
@@ -18,8 +18,9 @@ import { TagInput } from '@/components/common/TagInput';
 import { t } from '@/lib/i18n';
 import { hintForPath } from '@/lib/config-hints';
 import { toast } from 'sonner';
-import { MessageCircle, Settings, ToggleLeft, Hash, Mail, Globe, KeyRound } from 'lucide-react';
+import { MessageCircle, Settings, ToggleLeft, Hash, Mail, Globe, KeyRound, BookOpen } from 'lucide-react';
 import type { ConfigActionManifest } from '@/api/types';
+import { resolveChannelTutorialUrl } from '@/lib/channel-tutorials';
 type ChannelFieldType = 'boolean' | 'text' | 'email' | 'password' | 'number' | 'tags' | 'select' | 'json';
 type ChannelOption = { value: string; label: string };
@@ -210,6 +211,7 @@ function buildScopeDraft(scope: string, value: Record<string, unknown>): Record<
 export function ChannelForm() {
   const { channelModal, closeChannelModal } = useUiStore();
   const { data: config } = useConfig();
+  const { data: meta } = useConfigMeta();
   const { data: schema } = useConfigSchema();
   const updateChannel = useUpdateChannel();
   const executeAction = useExecuteConfigAction();
@@ -227,6 +229,8 @@ export function ChannelForm() {
   const channelLabel = channelName
     ? hintForPath(`channels.${channelName}`, uiHints)?.label ?? channelName
     : channelName;
+  const channelMeta = meta?.channels.find((item) => item.name === channelName);
+  const tutorialUrl = channelMeta ? resolveChannelTutorialUrl(channelMeta) : undefined;
   useEffect(() => {
     if (channelConfig) {
@@ -354,6 +358,15 @@ export function ChannelForm() {
             <div>
               <DialogTitle className="capitalize">{channelLabel}</DialogTitle>
               <DialogDescription>{t('configureMessageChannelParameters')}</DialogDescription>
+              {tutorialUrl && (
+                <a
+                  href={tutorialUrl}
+                  className="mt-2 inline-flex items-center gap-1.5 text-xs text-primary hover:text-primary-hover transition-colors"
+                >
+                  <BookOpen className="h-3.5 w-3.5" />
+                  {t('channelsGuideTitle')}
+                </a>
+              )}
             </div>
           </div>
         </DialogHeader>

package/src/components/config/ChannelsList.tsx CHANGED Viewed

@@ -13,6 +13,7 @@ import { ActionLink } from '@/components/ui/action-link';
 import { cn } from '@/lib/utils';
 import { t } from '@/lib/i18n';
 import { PageLayout, PageHeader } from '@/components/layout/page-layout';
+import { resolveChannelTutorialUrl } from '@/lib/channel-tutorials';
 const channelIcons: Record<string, typeof MessageCircle> = {
   telegram: MessageCircle,
@@ -66,6 +67,7 @@ export function ChannelsList() {
           const enabled = channelConfig?.enabled || false;
           const Icon = channelIcons[channel.name] || channelIcons.default;
           const channelHint = hintForPath(`channels.${channel.name}`, uiHints);
+          const tutorialUrl = resolveChannelTutorialUrl(channel);
           const description =
             channelHint?.help ||
             t(channelDescriptionKeys[channel.name] || 'channelDescriptionDefault');
@@ -98,11 +100,9 @@ export function ChannelsList() {
               <ConfigCardFooter>
                 <ActionLink label={enabled ? t('actionConfigure') : t('actionEnable')} />
-                {channel.tutorialUrl && (
+                {tutorialUrl && (
                   <a
-                    href={channel.tutorialUrl}
-                    target="_blank"
-                    rel="noreferrer"
+                    href={tutorialUrl}
                     onClick={(e) => e.stopPropagation()}
                     className="flex items-center justify-center h-6 w-6 rounded-md text-gray-300 hover:text-gray-500 hover:bg-gray-100/60 transition-colors"
                     title={t('channelsGuideTitle')}

package/src/components/config/ModelConfig.tsx CHANGED Viewed

@@ -3,20 +3,87 @@ 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 { useConfig, useConfigSchema, useUpdateModel } from '@/hooks/useConfig';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { SearchableModelInput } from '@/components/common/SearchableModelInput';
+import { useConfig, useConfigMeta, useConfigSchema, useUpdateModel } from '@/hooks/useConfig';
 import { hintForPath } from '@/lib/config-hints';
 import { formatNumber, t } from '@/lib/i18n';
 import { PageLayout, PageHeader } from '@/components/layout/page-layout';
 import { DOCS_DEFAULT_BASE_URL } from '@/components/doc-browser/DocBrowserContext';
 import { BookOpen, Folder, Loader2, Sliders, Sparkles } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+function normalizeStringList(input: string[] | null | undefined): string[] {
+  if (!input || input.length === 0) {
+    return [];
+  }
+  const deduped = new Set<string>();
+  for (const item of input) {
+    const trimmed = item.trim();
+    if (trimmed) {
+      deduped.add(trimmed);
+    }
+  }
+  return [...deduped];
+}
+function stripProviderPrefix(model: string, prefix: string): string {
+  const trimmed = model.trim();
+  const cleanPrefix = prefix.trim();
+  if (!trimmed || !cleanPrefix) {
+    return trimmed;
+  }
+  const withSlash = `${cleanPrefix}/`;
+  if (trimmed.startsWith(withSlash)) {
+    return trimmed.slice(withSlash.length);
+  }
+  return trimmed;
+}
+function toProviderLocalModel(model: string, aliases: string[]): string {
+  let normalized = model.trim();
+  if (!normalized) {
+    return '';
+  }
+  for (const alias of aliases) {
+    normalized = stripProviderPrefix(normalized, alias);
+  }
+  return normalized.trim();
+}
+function findProviderByModel(
+  model: string,
+  providerCatalog: Array<{ name: string; aliases: string[] }>
+): string | null {
+  const trimmed = model.trim();
+  if (!trimmed) {
+    return null;
+  }
+  let bestMatch: { name: string; score: number } | null = null;
+  for (const provider of providerCatalog) {
+    for (const alias of provider.aliases) {
+      const cleanAlias = alias.trim();
+      if (!cleanAlias) {
+        continue;
+      }
+      if (trimmed === cleanAlias || trimmed.startsWith(`${cleanAlias}/`)) {
+        if (!bestMatch || cleanAlias.length > bestMatch.score) {
+          bestMatch = { name: provider.name, score: cleanAlias.length };
+        }
+      }
+    }
+  }
+  return bestMatch?.name ?? null;
+}
 export function ModelConfig() {
   const { data: config, isLoading } = useConfig();
+  const { data: meta } = useConfigMeta();
   const { data: schema } = useConfigSchema();
   const updateModel = useUpdateModel();
-  const [model, setModel] = useState('');
+  const [providerName, setProviderName] = useState('');
+  const [modelId, setModelId] = useState('');
   const [workspace, setWorkspace] = useState('');
   const [maxTokens, setMaxTokens] = useState(8192);
   const uiHints = schema?.uiHints;
@@ -24,17 +91,91 @@ export function ModelConfig() {
   const workspaceHint = hintForPath('agents.defaults.workspace', uiHints);
   const maxTokensHint = hintForPath('agents.defaults.maxTokens', uiHints);
+  const providerCatalog = useMemo(() => {
+    return (meta?.providers ?? []).map((provider) => {
+      const prefix = (provider.modelPrefix || provider.name || '').trim();
+      const aliases = normalizeStringList([provider.modelPrefix || '', provider.name || '']);
+      const defaultModels = normalizeStringList((provider.defaultModels ?? []).map((model) => toProviderLocalModel(model, aliases)));
+      const customModels = normalizeStringList(
+        (config?.providers?.[provider.name]?.models ?? []).map((model) => toProviderLocalModel(model, aliases))
+      );
+      const allModels = normalizeStringList([...defaultModels, ...customModels]);
+      return {
+        name: provider.name,
+        displayName: provider.displayName || provider.name,
+        prefix,
+        aliases,
+        models: allModels
+      };
+    });
+  }, [meta, config]);
+  const providerMap = useMemo(() => new Map(providerCatalog.map((provider) => [provider.name, provider])), [providerCatalog]);
+  const selectedProvider = providerMap.get(providerName) ?? providerCatalog[0];
+  const selectedProviderName = selectedProvider?.name ?? '';
+  const selectedProviderAliases = useMemo(() => selectedProvider?.aliases ?? [], [selectedProvider]);
+  const selectedProviderModels = useMemo(() => selectedProvider?.models ?? [], [selectedProvider]);
   useEffect(() => {
-    if (config?.agents?.defaults) {
-      setModel(config.agents.defaults.model || '');
-      setWorkspace(config.agents.defaults.workspace || '');
-      setMaxTokens(config.agents.defaults.maxTokens || 8192);
+    if (providerName || providerCatalog.length === 0) {
+      return;
+    }
+    setProviderName(providerCatalog[0].name);
+  }, [providerName, providerCatalog]);
+  useEffect(() => {
+    if (!config?.agents?.defaults) {
+      return;
+    }
+    const currentModel = (config.agents.defaults.model || '').trim();
+    const matchedProvider = findProviderByModel(currentModel, providerCatalog);
+    const effectiveProvider = matchedProvider ?? providerCatalog[0]?.name ?? '';
+    const aliases = providerMap.get(effectiveProvider)?.aliases ?? [];
+    setProviderName(effectiveProvider);
+    setModelId(toProviderLocalModel(currentModel, aliases));
+    setWorkspace(config.agents.defaults.workspace || '');
+    setMaxTokens(config.agents.defaults.maxTokens || 8192);
+  }, [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(() => {
+    const normalizedModelId = toProviderLocalModel(modelId, selectedProviderAliases);
+    if (!normalizedModelId) {
+      return '';
+    }
+    if (!selectedProvider) {
+      return normalizedModelId;
     }
-  }, [config]);
+    if (!selectedProvider.prefix) {
+      return normalizedModelId;
+    }
+    return `${selectedProvider.prefix}/${normalizedModelId}`;
+  }, [modelId, selectedProvider, selectedProviderAliases]);
+  const modelHelpText = modelHint?.help ?? '';
+  const handleProviderChange = (nextProvider: string) => {
+    setProviderName(nextProvider);
+    setModelId('');
+  };
+  const handleModelChange = (nextModelId: string) => {
+    setModelId(toProviderLocalModel(nextModelId, selectedProviderAliases));
+  };
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    updateModel.mutate({ model, maxTokens });
+    updateModel.mutate({ model: composedModel, maxTokens });
   };
   if (isLoading) {
@@ -88,17 +229,36 @@ export function ModelConfig() {
               <Label htmlFor="model" className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
                 {modelHint?.label ?? 'Model Name'}
               </Label>
-              <Input
-                id="model"
-                value={model}
-                onChange={(e) => setModel(e.target.value)}
-                placeholder={modelHint?.placeholder ?? 'minimax/MiniMax-M2.1'}
-                className="h-12 px-4 rounded-xl"
-              />
-              <p className="text-xs text-gray-400">
-                {modelHint?.help ??
-                  'Examples: gpt-5.1 · claude-opus-4-1 · deepseek/deepseek-chat · dashscope/qwen-max-latest · openrouter/openai/gpt-5.3-codex'}
-              </p>
+              <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}
+                  placeholder={modelHint?.placeholder ?? 'gpt-5.1'}
+                  className="sm:flex-1"
+                  inputClassName="h-10 rounded-xl"
+                  emptyText={t('modelPickerNoOptions')}
+                  createText={t('modelPickerUseCustom')}
+                />
+              </div>
+              <p className="text-xs text-gray-400">{modelHelpText}</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"
@@ -127,7 +287,7 @@ export function ModelConfig() {
                 value={workspace}
                 onChange={(e) => setWorkspace(e.target.value)}
                 placeholder={workspaceHint?.placeholder ?? '/path/to/workspace'}
-                className="h-12 px-4 rounded-xl"
+                className="rounded-xl"
               />
             </div>
           </div>