npm - @nextclaw/ui - Versions diffs - 0.6.12 → 0.6.13 - Mend

@nextclaw/ui 0.6.12 → 0.6.13

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 (53) 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-Dl6t70wA.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-d7E8OgNx.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-BXwjfCEO.css">
+  <script type="module" crossorigin src="/assets/index-CB5eJOGS.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-BKtTvQYU.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-BCfS4UY1.css">
 </head>
 <body>

package/package.json CHANGED Viewed

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

package/src/api/types.ts CHANGED Viewed

@@ -14,6 +14,8 @@ export type AppMetaView = {
   productVersion: string;
 };
+export type ThinkingLevel = "off" | "minimal" | "low" | "medium" | "high" | "adaptive" | "xhigh";
 export type ProviderConfigView = {
   displayName?: string;
   apiKeySet: boolean;
@@ -22,6 +24,7 @@ export type ProviderConfigView = {
   extraHeaders?: Record<string, string> | null;
   wireApi?: "auto" | "chat" | "responses" | null;
   models?: string[];
+  modelThinking?: Record<string, { supported: ThinkingLevel[]; default?: ThinkingLevel | null }>;
 };
 export type ProviderConfigUpdate = {
@@ -31,6 +34,7 @@ export type ProviderConfigUpdate = {
   extraHeaders?: Record<string, string> | null;
   wireApi?: "auto" | "chat" | "responses" | null;
   models?: string[] | null;
+  modelThinking?: Record<string, { supported?: ThinkingLevel[]; default?: ThinkingLevel | null }> | null;
 };
 export type ProviderConnectionTestRequest = ProviderConfigUpdate & {

package/src/components/chat/ChatPage.tsx CHANGED Viewed

@@ -122,6 +122,7 @@ export function ChatPage({ view }: ChatPageProps) {
   const { sessionId: routeSessionIdParam } = useParams<{ sessionId?: string }>();
   const threadRef = useRef<HTMLDivElement | null>(null);
   const selectedSessionKeyRef = useRef<string | null>(selectedSessionKey);
+  const thinkingHydratedSessionKeyRef = useRef<string | null>(null);
   const routeSessionKey = useMemo(
     () => parseSessionKeyFromRoute(routeSessionIdParam),
     [routeSessionIdParam]
@@ -137,6 +138,7 @@ export function ChatPage({ view }: ChatPageProps) {
     skillRecords,
     selectedSession,
     historyMessages,
+    selectedSessionThinkingLevel,
     sessionTypeOptions,
     defaultSessionType,
     selectedSessionType,
@@ -232,6 +234,12 @@ export function ChatPage({ view }: ChatPageProps) {
   ]);
   useEffect(() => {
+    const shouldHydrateThinkingFromHistory =
+      !isSending &&
+      !isAwaitingAssistantOutput &&
+      !historyQuery.isLoading &&
+      selectedSessionKey !== thinkingHydratedSessionKeyRef.current;
     presenter.chatInputManager.syncSnapshot({
       isProviderStateResolved,
       defaultSessionType,
@@ -244,11 +252,18 @@ export function ChatPage({ view }: ChatPageProps) {
       modelOptions,
       sessionTypeOptions,
       selectedSessionType,
+      ...(shouldHydrateThinkingFromHistory ? { selectedThinkingLevel: selectedSessionThinkingLevel } : {}),
       canEditSessionType,
       sessionTypeUnavailable,
       skillRecords,
       isSkillsLoading: installedSkillsQuery.isLoading
     });
+    if (shouldHydrateThinkingFromHistory) {
+      thinkingHydratedSessionKeyRef.current = selectedSessionKey;
+    }
+    if (!selectedSessionKey) {
+      thinkingHydratedSessionKeyRef.current = null;
+    }
     presenter.chatSessionListManager.syncSnapshot({
       sessions,
       query,
@@ -292,6 +307,7 @@ export function ChatPage({ view }: ChatPageProps) {
     presenter,
     query,
     selectedSession,
+    selectedSessionThinkingLevel,
     selectedSessionKey,
     selectedAgentId,
     selectedSessionType,

package/src/components/chat/chat-input/ChatInputBottomToolbar.tsx CHANGED Viewed

@@ -5,6 +5,7 @@ import { ChatInputAttachButton } from '@/components/chat/chat-input/components/b
 import { ChatInputModelSelector } from '@/components/chat/chat-input/components/bottom-toolbar/ChatInputModelSelector';
 import { ChatInputSendControls } from '@/components/chat/chat-input/components/bottom-toolbar/ChatInputSendControls';
 import { ChatInputSessionTypeSelector } from '@/components/chat/chat-input/components/bottom-toolbar/ChatInputSessionTypeSelector';
+import { ChatInputThinkingSelector } from '@/components/chat/chat-input/components/bottom-toolbar/ChatInputThinkingSelector';
 import { t } from '@/lib/i18n';
 export function ChatInputBottomToolbar() {
@@ -27,6 +28,9 @@ export function ChatInputBottomToolbar() {
     snapshot.stopDisabledReason === '__preparing__'
       ? t('chatStopPreparing')
       : snapshot.stopDisabledReason?.trim() || t('chatStopUnavailable');
+  const selectedModelThinkingCapability = selectedModelOption?.thinkingCapability;
+  const thinkingSupportedLevels = selectedModelThinkingCapability?.supported ?? [];
+  const shouldShowThinkingSelector = thinkingSupportedLevels.length > 0;
   return (
     <div className="flex items-center justify-between px-3 pb-3">
@@ -53,6 +57,14 @@ export function ChatInputBottomToolbar() {
           isModelOptionsLoading={isModelOptionsLoading}
           hasModelOptions={hasModelOptions}
         />
+        {shouldShowThinkingSelector ? (
+          <ChatInputThinkingSelector
+            supportedLevels={thinkingSupportedLevels}
+            selectedThinkingLevel={snapshot.selectedThinkingLevel}
+            defaultThinkingLevel={selectedModelThinkingCapability?.default ?? null}
+            onSelectedThinkingLevelChange={presenter.chatInputManager.selectThinkingLevel}
+          />
+        ) : null}
         <ChatInputAttachButton />
       </div>
       <ChatInputSendControls

package/src/components/chat/chat-input/components/ChatInputSlashPanelSection.tsx CHANGED Viewed

@@ -43,10 +43,10 @@ export function ChatInputSlashPanelSection({
         onOpenAutoFocus={(event) => event.preventDefault()}
         style={resolvedSlashPanelWidth ? { width: `${resolvedSlashPanelWidth}px` } : undefined}
       >
-        <div className="grid min-h-[240px] grid-cols-[minmax(260px,340px)_minmax(0,1fr)]">
+        <div className="grid min-h-[240px] grid-cols-[minmax(220px,300px)_minmax(0,1fr)]">
           <div
             ref={slashListRef}
-            className="max-h-[320px] overflow-y-auto border-r border-gray-200 p-3 custom-scrollbar"
+            className="max-h-[320px] overflow-y-auto border-r border-gray-200 p-2.5 custom-scrollbar"
           >
             {isSlashPanelLoading ? (
               <div className="p-2 text-xs text-gray-500">{t('chatSlashLoading')}</div>
@@ -82,7 +82,7 @@ export function ChatInputSlashPanelSection({
               </>
             )}
           </div>
-          <div className="p-4">
+          <div className="max-w-[320px] p-3.5">
             {activeSlashItem ? (
               <div className="space-y-3">
                 <div className="flex items-center gap-2">

package/src/components/chat/chat-input/components/bottom-toolbar/ChatInputThinkingSelector.tsx ADDED Viewed

@@ -0,0 +1,74 @@
+import type { ThinkingLevel } from '@/api/types';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { t } from '@/lib/i18n';
+import { Brain } from 'lucide-react';
+type ChatInputThinkingSelectorProps = {
+  supportedLevels: ThinkingLevel[];
+  selectedThinkingLevel: ThinkingLevel | null;
+  defaultThinkingLevel?: ThinkingLevel | null;
+  onSelectedThinkingLevelChange: (value: ThinkingLevel) => void;
+};
+function thinkingLabel(level: ThinkingLevel): string {
+  if (level === 'off') {
+    return t('chatThinkingLevelOff');
+  }
+  if (level === 'minimal') {
+    return t('chatThinkingLevelMinimal');
+  }
+  if (level === 'low') {
+    return t('chatThinkingLevelLow');
+  }
+  if (level === 'medium') {
+    return t('chatThinkingLevelMedium');
+  }
+  if (level === 'high') {
+    return t('chatThinkingLevelHigh');
+  }
+  if (level === 'adaptive') {
+    return t('chatThinkingLevelAdaptive');
+  }
+  return t('chatThinkingLevelXhigh');
+}
+function normalizeLevels(levels: ThinkingLevel[]): ThinkingLevel[] {
+  const deduped: ThinkingLevel[] = [];
+  for (const level of ['off', ...levels] as ThinkingLevel[]) {
+    if (!deduped.includes(level)) {
+      deduped.push(level);
+    }
+  }
+  return deduped;
+}
+export function ChatInputThinkingSelector(props: ChatInputThinkingSelectorProps) {
+  if (props.supportedLevels.length === 0) {
+    return null;
+  }
+  const options = normalizeLevels(props.supportedLevels);
+  const fallback = options.includes('off') ? 'off' : options[0];
+  const resolvedValue =
+    (props.selectedThinkingLevel && options.includes(props.selectedThinkingLevel) && props.selectedThinkingLevel) ||
+    (props.defaultThinkingLevel && options.includes(props.defaultThinkingLevel) && props.defaultThinkingLevel) ||
+    fallback;
+  return (
+    <Select value={resolvedValue} onValueChange={(value) => props.onSelectedThinkingLevelChange(value as ThinkingLevel)}>
+      <SelectTrigger className="h-8 w-auto min-w-[150px] rounded-lg border-0 bg-transparent px-3 text-xs font-medium text-gray-600 shadow-none hover:bg-gray-100 focus:ring-0">
+        <div className="flex min-w-0 items-center gap-2 text-left">
+          <Brain className="h-3.5 w-3.5 shrink-0 text-gray-500" />
+          <span className="truncate text-xs font-semibold text-gray-700">{thinkingLabel(resolvedValue)}</span>
+        </div>
+      </SelectTrigger>
+      <SelectContent className="w-[180px]">
+        {options.map((level) => (
+          <SelectItem key={level} value={level}>
+            {thinkingLabel(level)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/chat/chat-input/useChatInputBarController.ts CHANGED Viewed

@@ -4,7 +4,9 @@ import type { MarketplaceInstalledRecord } from '@/api/types';
 import { t } from '@/lib/i18n';
 import type { ChatInputBarSlashItem } from '@/components/chat/chat-input.types';
-const SLASH_PANEL_MAX_WIDTH = 920;
+const SLASH_PANEL_MAX_WIDTH = 680;
+const SLASH_PANEL_DESKTOP_SHRINK_RATIO = 0.82;
+const SLASH_PANEL_DESKTOP_MIN_WIDTH = 560;
 type RankedSkill = {
   record: MarketplaceInstalledRecord;
@@ -162,7 +164,14 @@ function useSlashPanelController(params: SlashPanelControllerParams) {
   const isSlashPanelOpen = slashQuery !== null && !dismissedSlashPanel;
   const activeSlashItem = slashItems[activeSlashIndex] ?? null;
   const isSlashPanelLoading = params.isSkillsLoading;
-  const resolvedSlashPanelWidth = slashPanelWidth ? Math.min(slashPanelWidth, SLASH_PANEL_MAX_WIDTH) : undefined;
+  const resolvedSlashPanelWidth = slashPanelWidth
+    ? Math.min(
+        slashPanelWidth > SLASH_PANEL_DESKTOP_MIN_WIDTH
+          ? slashPanelWidth * SLASH_PANEL_DESKTOP_SHRINK_RATIO
+          : slashPanelWidth,
+        SLASH_PANEL_MAX_WIDTH
+      )
+    : undefined;
   useEffect(() => {
     const anchor = slashAnchorRef.current;

package/src/components/chat/chat-input.types.ts CHANGED Viewed

@@ -1,7 +1,15 @@
+import type { ThinkingLevel } from '@/api/types';
+export type ChatModelThinkingCapability = {
+  supported: ThinkingLevel[];
+  default?: ThinkingLevel | null;
+};
 export type ChatModelOption = {
   value: string;
   modelLabel: string;
   providerLabel: string;
+  thinkingCapability?: ChatModelThinkingCapability | null;
 };
 export type ChatInputBarSlashItem = {

package/src/components/chat/chat-page-data.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
-import type { SessionEntryView } from '@/api/types';
+import type { SessionEntryView, ThinkingLevel } from '@/api/types';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
 import { useChatSessionTypeState } from '@/components/chat/useChatSessionTypeState';
 import { useSyncSelectedModel } from '@/components/chat/chat-page-runtime';
@@ -13,7 +13,7 @@ import {
   useSessions,
 } from '@/hooks/useConfig';
 import { useMarketplaceInstalled } from '@/hooks/useMarketplace';
-import { buildProviderModelCatalog, composeProviderModel } from '@/lib/provider-models';
+import { buildProviderModelCatalog, composeProviderModel, resolveModelThinkingCapability } from '@/lib/provider-models';
 type UseChatPageDataParams = {
   query: string;
@@ -24,6 +24,19 @@ type UseChatPageDataParams = {
   setSelectedModel: Dispatch<SetStateAction<string>>;
 };
+const THINKING_LEVEL_SET = new Set<string>(['off', 'minimal', 'low', 'medium', 'high', 'adaptive', 'xhigh']);
+function parseThinkingLevel(value: unknown): ThinkingLevel | null {
+  if (typeof value !== 'string') {
+    return null;
+  }
+  const normalized = value.trim().toLowerCase();
+  if (!normalized) {
+    return null;
+  }
+  return THINKING_LEVEL_SET.has(normalized) ? (normalized as ThinkingLevel) : null;
+}
 export function useChatPageData(params: UseChatPageDataParams) {
   const configQuery = useConfig();
   const configMetaQuery = useConfigMeta();
@@ -57,7 +70,8 @@ export function useChatPageData(params: UseChatPageDataParams) {
         options.push({
           value,
           modelLabel: localModel,
-          providerLabel: provider.displayName
+          providerLabel: provider.displayName,
+          thinkingCapability: resolveModelThinkingCapability(provider.modelThinking, localModel, provider.aliases)
         });
       }
     }
@@ -93,6 +107,28 @@ export function useChatPageData(params: UseChatPageDataParams) {
   });
   const historyMessages = useMemo(() => historyQuery.data?.messages ?? [], [historyQuery.data?.messages]);
+  const selectedSessionThinkingLevel = useMemo(() => {
+    if (!params.selectedSessionKey) {
+      return null;
+    }
+    const metadata = historyQuery.data?.metadata;
+    if (!metadata || typeof metadata !== 'object') {
+      return null;
+    }
+    const candidates = [
+      metadata.preferred_thinking,
+      metadata.thinking,
+      metadata.thinking_level,
+      metadata.thinkingLevel
+    ];
+    for (const value of candidates) {
+      const level = parseThinkingLevel(value);
+      if (level) {
+        return level;
+      }
+    }
+    return null;
+  }, [historyQuery.data?.metadata, params.selectedSessionKey]);
   return {
     configQuery,
@@ -108,6 +144,7 @@ export function useChatPageData(params: UseChatPageDataParams) {
     skillRecords,
     selectedSession,
     historyMessages,
+    selectedSessionThinkingLevel,
     ...sessionTypeState
   };
 }

package/src/components/chat/chat-stream/transport.ts CHANGED Viewed

@@ -6,6 +6,9 @@ function buildSendTurnPayload(item: SendMessageParams, requestedSkills: string[]
   if (item.sessionType) {
     metadata.session_type = item.sessionType;
   }
+  if (item.thinkingLevel) {
+    metadata.thinking = item.thinkingLevel;
+  }
   if (requestedSkills.length > 0) {
     metadata.requested_skills = requestedSkills;
   }

package/src/components/chat/chat-stream/types.ts CHANGED Viewed

@@ -4,7 +4,8 @@ import type {
   ChatTurnStreamDeltaEvent,
   ChatTurnStreamReadyEvent,
   ChatTurnStreamSessionEvent,
-  SessionMessageView
+  SessionMessageView,
+  ThinkingLevel
 } from '@/api/types';
 export type SendMessageParams = {
@@ -14,6 +15,7 @@ export type SendMessageParams = {
   agentId: string;
   sessionType?: string;
   model?: string;
+  thinkingLevel?: ThinkingLevel;
   requestedSkills?: string[];
   stopSupported?: boolean;
   stopReason?: string;

package/src/components/chat/managers/chat-input.manager.ts CHANGED Viewed

@@ -7,6 +7,8 @@ import { normalizeSessionType } from '@/components/chat/useChatSessionTypeState'
 import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
 import type { SetStateAction } from 'react';
 import type { ChatStreamActionsManager } from '@/components/chat/managers/chat-stream-actions.manager';
+import type { ThinkingLevel } from '@/api/types';
+import type { ChatModelOption } from '@/components/chat/chat-input.types';
 export class ChatInputManager {
   constructor(
@@ -36,6 +38,14 @@ export class ChatInputManager {
       return;
     }
     useChatInputStore.getState().setSnapshot(patch);
+    if (
+      Object.prototype.hasOwnProperty.call(patch, 'modelOptions') ||
+      Object.prototype.hasOwnProperty.call(patch, 'selectedModel') ||
+      Object.prototype.hasOwnProperty.call(patch, 'selectedThinkingLevel')
+    ) {
+      const snapshot = useChatInputStore.getState().snapshot;
+      this.reconcileThinkingForModel(snapshot.selectedModel);
+    }
   };
   setDraft = (next: SetStateAction<string>) => {
@@ -77,6 +87,7 @@ export class ChatInputManager {
       agentId: sessionSnapshot.selectedAgentId,
       sessionType: inputSnapshot.selectedSessionType,
       model: inputSnapshot.selectedModel || undefined,
+      thinkingLevel: inputSnapshot.selectedThinkingLevel ?? undefined,
       stopSupported: inputSnapshot.stopSupported,
       stopReason: inputSnapshot.stopReason,
       requestedSkills,
@@ -99,6 +110,16 @@ export class ChatInputManager {
       return;
     }
     useChatInputStore.getState().setSnapshot({ selectedModel: value });
+    this.reconcileThinkingForModel(value);
+  };
+  setSelectedThinkingLevel = (next: SetStateAction<ThinkingLevel | null>) => {
+    const prev = useChatInputStore.getState().snapshot.selectedThinkingLevel;
+    const value = this.resolveUpdateValue(prev, next);
+    if (value === prev) {
+      return;
+    }
+    useChatInputStore.getState().setSnapshot({ selectedThinkingLevel: value });
   };
   selectSessionType = (value: string) => {
@@ -120,10 +141,40 @@ export class ChatInputManager {
     this.setSelectedModel(value);
   };
+  selectThinkingLevel = (value: ThinkingLevel) => {
+    this.setSelectedThinkingLevel(value);
+  };
   selectSkills = (next: string[]) => {
     this.setSelectedSkills(next);
   };
+  private resolveThinkingForModel(modelOption: ChatModelOption | undefined, current: ThinkingLevel | null): ThinkingLevel | null {
+    const capability = modelOption?.thinkingCapability;
+    if (!capability || capability.supported.length === 0) {
+      return null;
+    }
+    if (current === 'off') {
+      return 'off';
+    }
+    if (current && capability.supported.includes(current)) {
+      return current;
+    }
+    if (capability.default && capability.supported.includes(capability.default)) {
+      return capability.default;
+    }
+    return 'off';
+  }
+  private reconcileThinkingForModel(model: string): void {
+    const snapshot = useChatInputStore.getState().snapshot;
+    const modelOption = snapshot.modelOptions.find((option) => option.value === model);
+    const nextThinking = this.resolveThinkingForModel(modelOption, snapshot.selectedThinkingLevel);
+    if (nextThinking !== snapshot.selectedThinkingLevel) {
+      useChatInputStore.getState().setSnapshot({ selectedThinkingLevel: nextThinking });
+    }
+  }
   private syncRemoteSessionType = async (normalizedType: string) => {
     const sessionSnapshot = useChatSessionListStore.getState().snapshot;
     const selectedSessionKey = sessionSnapshot.selectedSessionKey;

package/src/components/chat/stores/chat-input.store.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import { create } from 'zustand';
 import type { MarketplaceInstalledRecord } from '@/api/types';
+import type { ThinkingLevel } from '@/api/types';
+import type { ChatModelOption } from '@/components/chat/chat-input.types';
 export type ChatInputSnapshot = {
   isProviderStateResolved: boolean;
@@ -10,8 +12,9 @@ export type ChatInputSnapshot = {
   stopDisabledReason: string | null;
   sendError: string | null;
   isSending: boolean;
-  modelOptions: Array<{ value: string; modelLabel: string; providerLabel: string }>;
+  modelOptions: ChatModelOption[];
   selectedModel: string;
+  selectedThinkingLevel: ThinkingLevel | null;
   sessionTypeOptions: Array<{ value: string; label: string }>;
   selectedSessionType?: string;
   stopSupported: boolean;
@@ -39,6 +42,7 @@ const initialSnapshot: ChatInputSnapshot = {
   isSending: false,
   modelOptions: [],
   selectedModel: '',
+  selectedThinkingLevel: null,
   sessionTypeOptions: [],
   selectedSessionType: undefined,
   stopSupported: false,

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

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Check, ChevronsUpDown } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { cn } from '@/lib/utils';
@@ -8,6 +8,7 @@ type SearchableModelInputProps = {
   value: string;
   onChange: (value: string) => void;
   options: string[];
+  disabled?: boolean;
   placeholder?: string;
   className?: string;
   inputClassName?: string;
@@ -33,6 +34,7 @@ export function SearchableModelInput({
   value,
   onChange,
   options,
+  disabled = false,
   placeholder,
   className,
   inputClassName,
@@ -43,6 +45,12 @@ export function SearchableModelInput({
 }: SearchableModelInputProps) {
   const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (disabled && open) {
+      setOpen(false);
+    }
+  }, [disabled, open]);
   const normalizedOptions = useMemo(() => normalizeOptions(options), [options]);
   const query = value.trim().toLowerCase();
@@ -80,10 +88,15 @@ export function SearchableModelInput({
       <Input
         id={id}
         value={value}
-        onFocus={() => setOpen(true)}
+        disabled={disabled}
+        onFocus={() => {
+          if (!disabled) {
+            setOpen(true);
+          }
+        }}
         onChange={(event) => {
           onChange(event.target.value);
-          if (!open) {
+          if (!open && !disabled) {
             setOpen(true);
           }
         }}
@@ -103,13 +116,17 @@ export function SearchableModelInput({
         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"
+        disabled={disabled}
+        className={cn(
+          'absolute inset-y-0 right-0 inline-flex w-10 items-center justify-center',
+          disabled ? 'cursor-not-allowed text-gray-300' : 'text-gray-400 hover:text-gray-600'
+        )}
         aria-label="toggle model options"
       >
         <ChevronsUpDown className="h-4 w-4" />
       </button>
-      {open && (
+      {open && !disabled && (
         <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 && (

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

@@ -33,33 +33,26 @@ export function ModelConfig() {
   const workspaceHint = hintForPath('agents.defaults.workspace', uiHints);
   const providerCatalog = useMemo(
-    () => buildProviderModelCatalog({ meta, config }),
+    () => buildProviderModelCatalog({ meta, config, onlyConfigured: true }),
     [config, meta]
   );
   const providerMap = useMemo(() => new Map(providerCatalog.map((provider) => [provider.name, provider])), [providerCatalog]);
-  const selectedProvider = providerMap.get(providerName) ?? providerCatalog[0];
+  const selectedProvider = providerMap.get(providerName);
   const selectedProviderName = selectedProvider?.name ?? '';
   const selectedProviderAliases = useMemo(() => selectedProvider?.aliases ?? [], [selectedProvider]);
   const selectedProviderModels = useMemo(() => selectedProvider?.models ?? [], [selectedProvider]);
-  useEffect(() => {
-    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 effectiveProvider = matchedProvider ?? '';
     const aliases = providerMap.get(effectiveProvider)?.aliases ?? [];
     setProviderName(effectiveProvider);
-    setModelId(toProviderLocalModel(currentModel, aliases));
+    setModelId(effectiveProvider ? toProviderLocalModel(currentModel, aliases) : '');
     setWorkspace(config.agents.defaults.workspace || '');
   }, [config, providerCatalog, providerMap]);
@@ -75,11 +68,14 @@ export function ModelConfig() {
   }, [selectedProviderModels]);
   const composedModel = useMemo(() => {
+    if (!selectedProvider) {
+      return '';
+    }
     const normalizedModelId = toProviderLocalModel(modelId, selectedProviderAliases);
     if (!normalizedModelId) {
       return '';
     }
-    return composeProviderModel(selectedProvider?.prefix ?? '', normalizedModelId);
+    return composeProviderModel(selectedProvider.prefix, normalizedModelId);
   }, [modelId, selectedProvider, selectedProviderAliases]);
   const modelHelpText = t('modelIdentifierHelp') || modelHint?.help || '';
@@ -90,6 +86,10 @@ export function ModelConfig() {
   };
   const handleModelChange = (nextModelId: string) => {
+    if (!selectedProvider) {
+      setModelId('');
+      return;
+    }
     setModelId(toProviderLocalModel(nextModelId, selectedProviderAliases));
   };
@@ -165,6 +165,7 @@ export function ModelConfig() {
                   value={modelId}
                   onChange={handleModelChange}
                   options={modelOptions}
+                  disabled={!selectedProviderName}
                   placeholder={modelHint?.placeholder ?? 'gpt-5.1'}
                   className="sm:flex-1"
                   inputClassName="h-10 rounded-xl"