GCWing · GCWing · Mar 14, 2026 · Mar 14, 2026
diff --git a/src/web-ui/src/component-library/components/NumberInput/NumberInput.tsx b/src/web-ui/src/component-library/components/NumberInput/NumberInput.tsx
@@ -23,6 +23,7 @@ export interface NumberInputProps {
   className?: string;
   label?: string;
   draggable?: boolean;
+  disableWheel?: boolean;
 }
 
 export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
@@ -42,6 +43,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       className = '',
       label,
       draggable = false,
+      disableWheel = false,
     },
     ref
   ) => {
@@ -162,15 +164,15 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
 
     const handleWheel = useCallback(
       (e: React.WheelEvent) => {
-        if (disabled || !isHovered) return;
+        if (disabled || disableWheel || !isHovered) return;
         e.preventDefault();
         if (e.deltaY < 0) {
           increment();
         } else {
           decrement();
         }
       },
-      [disabled, isHovered, increment, decrement]
+      [disabled, disableWheel, isHovered, increment, decrement]
     );
 
     const containerClassName = [

diff --git a/src/web-ui/src/flow_chat/components/ModelSelector.tsx b/src/web-ui/src/flow_chat/components/ModelSelector.tsx
@@ -52,19 +52,50 @@ const formatContextWindow = (contextWindow?: number): string | null => {
   return `${Math.round(contextWindow / 1000)}k`;
 };
 
-const buildModelMetaText = (model: Pick<ModelInfo, 'providerName' | 'contextWindow' | 'reasoningEffort'>): string => {
+const buildModelMetaText = (model: Pick<ModelInfo, 'providerName' | 'contextWindow'>): string => {
   const parts = [model.providerName];
   const contextWindow = formatContextWindow(model.contextWindow);
 
   if (contextWindow) {
     parts.push(contextWindow);
   }
 
-  if (model.reasoningEffort) {
-    parts.push(model.reasoningEffort);
+  return parts.join(' · ');
+};
+
+const buildResolvedModelTooltipText = (
+  modelName: string | undefined,
+  model: Pick<ModelInfo, 'providerName' | 'contextWindow'> | null | undefined,
+  fallback: string
+): string => {
+  if (!model) return fallback;
+
+  const parts = [];
+  if (modelName) {
+    parts.push(modelName);
   }
 
-  return parts.join(' · ');
+  const metaText = buildModelMetaText(model);
+  if (metaText) {
+    parts.push(metaText);
+  }
+
+  return parts.join(' · ') || fallback;
+};
+
+const getModelDisplayLabel = (model: ModelInfo | null, fallback: string): string => {
+  if (!model) return fallback;
+  if (isSpecialModel(model.id)) return model.configName;
+  return model.modelName || model.configName || fallback;
+};
+
+const getModelTooltipText = (model: ModelInfo | null, fallback: string): string => {
+  if (!model) return fallback;
+  if (model.id === 'auto') return model.providerName;
+  if (isSpecialModel(model.id)) {
+    return buildResolvedModelTooltipText(model.modelName, model, fallback);
+  }
+  return buildModelMetaText(model);
 };
 
 export const ModelSelector: React.FC<ModelSelectorProps> = ({
@@ -248,15 +279,15 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       ref={dropdownRef}
       className={`bitfun-model-selector ${className}`}
     >
-      <Tooltip content={currentModel ? `${currentModel.modelName} · ${buildModelMetaText(currentModel)}` : t('modelSelector.modelNotConfigured')}>
+      <Tooltip content={getModelTooltipText(currentModel, t('modelSelector.modelNotConfigured'))}>
         <button
           className={`bitfun-model-selector__trigger ${dropdownOpen ? 'bitfun-model-selector__trigger--open' : ''}`}
           onClick={() => setDropdownOpen(!dropdownOpen)}
           disabled={loading}
         >
           <Cpu size={10} className="bitfun-model-selector__icon" />
           <span className="bitfun-model-selector__name">
-            {currentModel ? currentModel.configName : t('modelSelector.modelNotConfigured')}
+            {getModelDisplayLabel(currentModel, t('modelSelector.modelNotConfigured'))}
           </span>
           {currentModel?.enableThinking && (
             <Sparkles size={9} className="bitfun-model-selector__thinking-icon" />
@@ -296,7 +327,10 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
           {(() => {
             const primaryModel = allModels.find(m => m.id === defaultModels.primary);
             const primaryTooltip = primaryModel
-              ? `${primaryModel.name}（${primaryModel.model_name}）· ${buildModelMetaText({ providerName: getProviderDisplayName(primaryModel), contextWindow: primaryModel.context_window, reasoningEffort: primaryModel.reasoning_effort })}`
+              ? buildResolvedModelTooltipText(primaryModel.model_name, {
+                providerName: getProviderDisplayName(primaryModel),
+                contextWindow: primaryModel.context_window
+              }, t('modelSelector.modelNotConfigured'))
               : t('modelSelector.modelNotConfigured');
             return (
               <Tooltip content={primaryTooltip} placement="right">
@@ -318,7 +352,10 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
           {(() => {
             const fastModel = allModels.find(m => m.id === defaultModels.fast);
             const fastTooltip = fastModel
-              ? `${fastModel.name}（${fastModel.model_name}）· ${buildModelMetaText({ providerName: getProviderDisplayName(fastModel), contextWindow: fastModel.context_window, reasoningEffort: fastModel.reasoning_effort })}`
+              ? buildResolvedModelTooltipText(fastModel.model_name, {
+                providerName: getProviderDisplayName(fastModel),
+                contextWindow: fastModel.context_window
+              }, t('modelSelector.modelNotConfigured'))
               : t('modelSelector.modelNotConfigured');
             return (
               <Tooltip content={fastTooltip} placement="right">
@@ -344,14 +381,14 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
               const isSelected = currentModelId === model.id;
 
               return (
-                <Tooltip key={model.id} content={`${model.modelName} · ${buildModelMetaText(model)}`} placement="right">
+                <Tooltip key={model.id} content={buildModelMetaText(model)} placement="right">
                   <div
                     className={`bitfun-model-selector__option ${isSelected ? 'bitfun-model-selector__option--selected' : ''}`}
                     onClick={() => handleSelectModel(model.id)}
                   >
                     <div className="bitfun-model-selector__option-main">
                       <span className="bitfun-model-selector__option-name">
-                        {model.configName}
+                        {model.modelName}
                         {model.enableThinking && (
                           <Sparkles size={10} className="bitfun-model-selector__option-thinking" />
                         )}

diff --git a/src/web-ui/src/infrastructure/config/components/AIModelConfig.scss b/src/web-ui/src/infrastructure/config/components/AIModelConfig.scss
@@ -1045,6 +1045,17 @@
     }
 
     .select--multiple {
+      .select__trigger {
+        flex-wrap: nowrap;
+        overflow: hidden;
+      }
+
+      .select__tags {
+        flex-wrap: nowrap;
+        min-width: 0;
+        overflow: hidden;
+      }
+
       .select__tag {
         background: var(--element-bg-subtle);
         border: none;
@@ -1073,6 +1084,56 @@
     }
   }
 
+  &__model-picker-value {
+    display: flex;
+    align-items: center;
+    gap: $size-gap-2;
+    min-width: 0;
+    width: 100%;
+    color: var(--color-text-primary);
+  }
+
+  &__model-picker-value-text {
+    min-width: 0;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__model-picker-value-more {
+    flex-shrink: 0;
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+  }
+
+  &__model-picker-select {
+    &--has-value {
+      .select__arrow {
+        width: 12px;
+        height: 12px;
+        color: var(--color-text-muted);
+        transform: none;
+
+        &::before {
+          content: '+';
+          font-size: 16px;
+          line-height: 1;
+          font-weight: 400;
+        }
+
+        svg {
+          display: none;
+        }
+
+        &.select__arrow--open {
+          transform: none;
+          color: var(--color-text-muted);
+        }
+      }
+    }
+  }
+
   &__manual-model-entry {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
@@ -1106,7 +1167,7 @@
     width: 100%;
     min-height: 35px;
     padding: 0 12px;
-    border: 1px dashed var(--border-base);
+    border: none;
     border-radius: $size-radius-sm;
     color: var(--color-text-muted);
     font-size: 13px;
@@ -1119,7 +1180,7 @@
     flex-direction: column;
     gap: $size-gap-2;
     padding: $size-gap-3;
-    border: 1px solid var(--border-base);
+    border: none;
     border-radius: $size-radius-sm;
     background: var(--element-bg-subtle);
   }
@@ -1250,6 +1311,13 @@
   &__resolved-url-input {
     .bitfun-input-container {
       background: var(--element-bg-subtle, rgba(255, 255, 255, 0.05));
+      border: none;
+      box-shadow: none;
+    }
+
+    .bitfun-input-container:hover,
+    .bitfun-input-container:focus-within {
+      border: none;
     }
 
     .bitfun-input {

diff --git a/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx b/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
@@ -1025,6 +1025,24 @@ const AIModelConfig: React.FC = () => {
               ? t('providerSelection.noPresetModels')
               : null;
     const selectedModelValues = selectedModelDrafts.map(draft => draft.modelName);
+    const renderModelPickerValue = (option?: SelectOption | SelectOption[]) => {
+      const selectedOptions = Array.isArray(option) ? option : option ? [option] : [];
+
+      if (selectedOptions.length === 0) {
+        return <span className="select__placeholder">{t('providerSelection.selectModel')}</span>;
+      }
+      const summaryText = selectedOptions
+        .map(item => String(item.label))
+        .join(', ');
+
+      return (
+        <span className="select__value bitfun-ai-model-config__model-picker-value">
+          <span className="select__value-label bitfun-ai-model-config__model-picker-value-text">
+            {summaryText}
+          </span>
+        </span>
+      );
+    };
     const apiKeyVisibilityLabel = showApiKey ? tComponents('hide') : tComponents('show');
     const apiKeySuffix = (
       <button
@@ -1097,6 +1115,7 @@ const AIModelConfig: React.FC = () => {
                     max={2000000}
                     step={1000}
                     size="small"
+                    disableWheel
                   />
                 </div>
                 <div className="bitfun-ai-model-config__selected-model-field">
@@ -1108,6 +1127,7 @@ const AIModelConfig: React.FC = () => {
                     max={1000000}
                     step={1000}
                     size="small"
+                    disableWheel
                   />
                 </div>
                 <div className="bitfun-ai-model-config__selected-model-field">
@@ -1235,6 +1255,8 @@ const AIModelConfig: React.FC = () => {
                         searchPlaceholder={t('providerSelection.inputModelName')}
                         size="small"
                         onOpenChange={handleModelSelectionOpenChange}
+                        renderValue={renderModelPickerValue}
+                        className={selectedModelValues.length > 0 ? 'bitfun-ai-model-config__model-picker-select bitfun-ai-model-config__model-picker-select--has-value' : 'bitfun-ai-model-config__model-picker-select'}
                       />
                     </div>
                     <div className="bitfun-ai-model-config__manual-model-entry">

diff --git a/src/web-ui/src/locales/zh-CN/onboarding.json b/src/web-ui/src/locales/zh-CN/onboarding.json
@@ -130,7 +130,7 @@
       "placeholder": "示例：glm-4.7",
       "selectPlaceholder": "选择模型...",
       "searchPlaceholder": "搜索或输入自定义模型名称...",
-      "inputPlaceholder": "输入模型名称...",
+      "inputPlaceholder": "输入自定义模型名称...",
       "customHint": "使用自定义模型名称"
     },
     "format": {

diff --git a/src/web-ui/src/locales/zh-CN/settings/ai-model.json b/src/web-ui/src/locales/zh-CN/settings/ai-model.json
@@ -29,7 +29,7 @@
     "selectModel": "选择模型",
     "multiSelectHint": "支持多选；选中后可分别设置每个模型的上下文窗口、最大输出 Tokens 和思考开关",
     "searchOrInputModel": "搜索或输入模型名称...",
-    "inputModelName": "输入模型名称...",
+    "inputModelName": "输入自定义模型名称...",
     "useCustomModel": "按 Enter 使用",
     "addCustomModel": "添加自定义模型",
     "noModelsSelected": "请先选择模型",