@nextclaw/ui 0.6.9 → 0.6.11

package/src/components/chat/stores/chat-session-list.store.ts

@@ -0,0 +1,34 @@
+import { create } from 'zustand';
+import type { SessionEntryView } from '@/api/types';
+
+export type ChatSessionListSnapshot = {
+  sessions: SessionEntryView[];
+  selectedSessionKey: string | null;
+  selectedAgentId: string;
+  query: string;
+  isLoading: boolean;
+};
+
+type ChatSessionListStore = {
+  snapshot: ChatSessionListSnapshot;
+  setSnapshot: (patch: Partial<ChatSessionListSnapshot>) => void;
+};
+
+const initialSnapshot: ChatSessionListSnapshot = {
+  sessions: [],
+  selectedSessionKey: null,
+  selectedAgentId: 'main',
+  query: '',
+  isLoading: false
+};
+
+export const useChatSessionListStore = create<ChatSessionListStore>((set) => ({
+  snapshot: initialSnapshot,
+  setSnapshot: (patch) =>
+    set((state) => ({
+      snapshot: {
+        ...state.snapshot,
+        ...patch
+      }
+    }))
+}));

package/src/components/chat/stores/chat-thread.store.ts

@@ -0,0 +1,52 @@
+import { create } from 'zustand';
+import type { MutableRefObject } from 'react';
+import type { UiMessage } from '@nextclaw/agent-chat';
+import type { ChatModelOption } from '@/components/chat/chat-input.types';
+
+export type ChatThreadSnapshot = {
+  isProviderStateResolved: boolean;
+  modelOptions: ChatModelOption[];
+  sessionTypeUnavailable: boolean;
+  sessionTypeUnavailableMessage?: string | null;
+  selectedSessionKey: string | null;
+  sessionDisplayName?: string;
+  canDeleteSession: boolean;
+  isDeletePending: boolean;
+  threadRef: MutableRefObject<HTMLDivElement | null> | null;
+  isHistoryLoading: boolean;
+  uiMessages: UiMessage[];
+  isSending: boolean;
+  isAwaitingAssistantOutput: boolean;
+};
+
+type ChatThreadStore = {
+  snapshot: ChatThreadSnapshot;
+  setSnapshot: (patch: Partial<ChatThreadSnapshot>) => void;
+};
+
+const initialSnapshot: ChatThreadSnapshot = {
+  isProviderStateResolved: false,
+  modelOptions: [],
+  sessionTypeUnavailable: false,
+  sessionTypeUnavailableMessage: null,
+  selectedSessionKey: null,
+  sessionDisplayName: undefined,
+  canDeleteSession: false,
+  isDeletePending: false,
+  threadRef: null,
+  isHistoryLoading: false,
+  uiMessages: [],
+  isSending: false,
+  isAwaitingAssistantOutput: false
+};
+
+export const useChatThreadStore = create<ChatThreadStore>((set) => ({
+  snapshot: initialSnapshot,
+  setSnapshot: (patch) =>
+    set((state) => ({
+      snapshot: {
+        ...state.snapshot,
+        ...patch
+      }
+    }))
+}));

package/src/components/chat/useChatRuntimeController.ts

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { type AgentChatController, getStopDisabledReason } from '@nextclaw/agent-chat';
+import type { ChatRunView, SessionMessageView } from '@/api/types';
+import type { SendMessageParams, UseChatStreamControllerParams } from '@/components/chat/chat-stream/types';
+import { buildResumeMetadata, buildSendMetadata } from '@/components/chat/chat-stream/nextbot-parsers';
+import { buildUiMessagesFromHistoryMessages, normalizeRequestedSkills } from '@/lib/chat-runtime-utils';
+import { useValueFromBehaviorSubject, useValueFromObservable } from '@/hooks/useObservable';
+
+export function useChatRuntimeController(
+  params: UseChatStreamControllerParams,
+  controller: AgentChatController
+) {
+  const paramsRef = useRef(params);
+  useEffect(() => {
+    paramsRef.current = params;
+  });
+
+  const activeHistorySessionKeyRef = useRef<string | null>(null);
+
+  // Bind callbacks to controller
+  useEffect(() => {
+    controller.setCallbacks({
+      onRunSettled: async ({ sourceSessionId, resultSessionId }) => {
+        const bindings = paramsRef.current;
+        await bindings.refetchSessions();
+        const activeSessionKey = bindings.selectedSessionKeyRef.current;
+        if (!activeSessionKey || activeSessionKey === sourceSessionId || (resultSessionId && activeSessionKey === resultSessionId)) {
+          await bindings.refetchHistory();
+        }
+      },
+      onRunError: ({ sourceMessage, restoreDraft }) => {
+        if (restoreDraft) {
+          paramsRef.current.setDraft((prev) => (prev.trim().length === 0 && sourceMessage ? sourceMessage : prev));
+        }
+      },
+      onSessionChanged: (sessionId) => {
+        paramsRef.current.setSelectedSessionKey((prev) => (prev === sessionId ? prev : sessionId));
+      }
+    });
+  }, [controller]);
+
+  // Reactive state from controller observables
+  const uiMessages = useValueFromObservable(controller.messages$, controller.getMessages());
+  const isSending = useValueFromBehaviorSubject(controller.isAgentResponding$);
+  const isAwaitingAssistantOutput = useValueFromBehaviorSubject(controller.isAwaitingResponse$);
+  const activeRun = useValueFromBehaviorSubject(controller.activeRun$);
+  const lastSendError = useValueFromBehaviorSubject(controller.lastError$);
+
+  // Derived state
+  const activeBackendRunId = activeRun?.remoteRunId ?? null;
+  const stopDisabledReason = getStopDisabledReason(activeRun);
+  const canStopCurrentRun = Boolean(
+    activeRun && (stopDisabledReason === null || (activeRun.remoteStopCapable && !activeBackendRunId))
+  );
+
+  const sendMessage = useCallback(async (payload: SendMessageParams) => {
+    const requestedSkills = normalizeRequestedSkills(payload.requestedSkills);
+    const metadata = buildSendMetadata(payload, requestedSkills);
+    await controller.send({
+      message: payload.message,
+      sessionId: payload.sessionKey,
+      agentId: payload.agentId,
+      metadata,
+      restoreDraftOnError: payload.restoreDraftOnError,
+      stopCapable: payload.stopSupported,
+      stopReason: payload.stopReason
+    });
+  }, [controller]);
+
+  const resumeRun = useCallback(async (run: ChatRunView) => {
+    const backendRunId = run.runId?.trim();
+    const sessionKey = run.sessionKey?.trim();
+    if (!backendRunId || !sessionKey) {
+      return;
+    }
+    const metadata = buildResumeMetadata(run);
+    await controller.resume({
+      remoteRunId: backendRunId,
+      sessionId: sessionKey,
+      agentId: run.agentId,
+      metadata,
+      stopCapable: run.stopSupported,
+      stopReason: run.stopReason
+    });
+  }, [controller]);
+
+  const stopCurrentRun = useCallback(async () => {
+    await controller.stop();
+  }, [controller]);
+
+  const resetStreamState = useCallback(() => {
+    activeHistorySessionKeyRef.current = null;
+    controller.reset();
+  }, [controller]);
+
+  const applyHistoryMessages = useCallback((messages: SessionMessageView[], options?: { isLoading?: boolean }) => {
+    const isRunActive = Boolean(controller.activeRun$.getValue() || controller.isAgentResponding$.getValue());
+    if (isRunActive) {
+      return;
+    }
+    const selectedSessionKey = paramsRef.current.selectedSessionKeyRef.current;
+    if (selectedSessionKey !== activeHistorySessionKeyRef.current) {
+      activeHistorySessionKeyRef.current = selectedSessionKey;
+      if (controller.getMessages().length > 0) {
+        controller.setMessages([]);
+      }
+    }
+    if (!selectedSessionKey) {
+      if (controller.getMessages().length > 0) {
+        controller.setMessages([]);
+      }
+      return;
+    }
+    if (options?.isLoading && messages.length === 0) {
+      return;
+    }
+    controller.setMessages(buildUiMessagesFromHistoryMessages(messages));
+  }, [controller]);
+
+  return {
+    uiMessages,
+    isSending,
+    isAwaitingAssistantOutput,
+    canStopCurrentRun,
+    stopDisabledReason,
+    lastSendError,
+    activeBackendRunId,
+    sendMessage,
+    stopCurrentRun,
+    resumeRun,
+    resetStreamState,
+    applyHistoryMessages
+  };
+}

package/src/components/chat/useChatSessionTypeState.ts

@@ -0,0 +1,148 @@
+import { useEffect, useMemo } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import type { SessionEntryView } from '@/api/types';
+import { t } from '@/lib/i18n';
+
+export const DEFAULT_SESSION_TYPE = 'native';
+
+export type ChatSessionTypeOption = {
+  value: string;
+  label: string;
+};
+
+type UseChatSessionTypeStateParams = {
+  selectedSession: SessionEntryView | null;
+  selectedSessionKey: string | null;
+  pendingSessionType: string;
+  setPendingSessionType: Dispatch<SetStateAction<string>>;
+  sessionTypesData?: {
+    defaultType?: string;
+    options?: Array<{ value: string; label: string }>;
+  } | null;
+};
+
+export function normalizeSessionType(value: unknown): string {
+  if (typeof value !== 'string') {
+    return DEFAULT_SESSION_TYPE;
+  }
+  const normalized = value.trim().toLowerCase();
+  return normalized || DEFAULT_SESSION_TYPE;
+}
+
+export function resolveSessionTypeLabel(sessionType: string, fallbackLabel?: string): string {
+  if (sessionType === 'native') {
+    return t('chatSessionTypeNative');
+  }
+  if (sessionType === 'codex-sdk') {
+    return t('chatSessionTypeCodex');
+  }
+  if (sessionType === 'claude-agent-sdk') {
+    return t('chatSessionTypeClaude');
+  }
+  return fallbackLabel?.trim() || sessionType;
+}
+
+function buildSessionTypeOptions(
+  options: Array<{ value: string; label: string }>
+): ChatSessionTypeOption[] {
+  const deduped = new Map<string, ChatSessionTypeOption>();
+  for (const option of options) {
+    const value = normalizeSessionType(option.value);
+    deduped.set(value, {
+      value,
+      label: option.label?.trim() || resolveSessionTypeLabel(value)
+    });
+  }
+  if (!deduped.has(DEFAULT_SESSION_TYPE)) {
+    deduped.set(DEFAULT_SESSION_TYPE, {
+      value: DEFAULT_SESSION_TYPE,
+      label: resolveSessionTypeLabel(DEFAULT_SESSION_TYPE)
+    });
+  }
+  return Array.from(deduped.values()).sort((left, right) => {
+    if (left.value === DEFAULT_SESSION_TYPE) {
+      return -1;
+    }
+    if (right.value === DEFAULT_SESSION_TYPE) {
+      return 1;
+    }
+    return left.value.localeCompare(right.value);
+  });
+}
+
+export function useChatSessionTypeState(params: UseChatSessionTypeStateParams): {
+  sessionTypeOptions: ChatSessionTypeOption[];
+  defaultSessionType: string;
+  selectedSessionType: string;
+  canEditSessionType: boolean;
+  sessionTypeUnavailable: boolean;
+  sessionTypeUnavailableMessage: string | null;
+} {
+  const {
+    selectedSession,
+    selectedSessionKey,
+    pendingSessionType,
+    setPendingSessionType,
+    sessionTypesData
+  } = params;
+
+  const runtimeSessionTypeOptions = useMemo(
+    () => buildSessionTypeOptions(sessionTypesData?.options ?? []),
+    [sessionTypesData?.options]
+  );
+  const sessionTypeOptions = useMemo(() => {
+    const options = [...runtimeSessionTypeOptions];
+    const currentSessionType = normalizeSessionType(selectedSession?.sessionType);
+    if (!options.some((option) => option.value === currentSessionType)) {
+      options.push({
+        value: currentSessionType,
+        label: resolveSessionTypeLabel(currentSessionType)
+      });
+    }
+    return options.sort((left, right) => {
+      if (left.value === DEFAULT_SESSION_TYPE) {
+        return -1;
+      }
+      if (right.value === DEFAULT_SESSION_TYPE) {
+        return 1;
+      }
+      return left.value.localeCompare(right.value);
+    });
+  }, [runtimeSessionTypeOptions, selectedSession?.sessionType]);
+  const defaultSessionType = useMemo(
+    () => normalizeSessionType(sessionTypesData?.defaultType ?? DEFAULT_SESSION_TYPE),
+    [sessionTypesData?.defaultType]
+  );
+  const selectedSessionType = useMemo(
+    () => normalizeSessionType(selectedSession?.sessionType ?? pendingSessionType ?? defaultSessionType),
+    [defaultSessionType, pendingSessionType, selectedSession?.sessionType]
+  );
+
+  useEffect(() => {
+    if (selectedSessionKey) {
+      return;
+    }
+    setPendingSessionType(defaultSessionType);
+  }, [defaultSessionType, selectedSessionKey, setPendingSessionType]);
+
+  const canEditSessionType = !selectedSessionKey || Boolean(selectedSession?.sessionTypeMutable);
+  const availableSessionTypeSet = useMemo(
+    () => new Set(runtimeSessionTypeOptions.map((option) => option.value)),
+    [runtimeSessionTypeOptions]
+  );
+  const sessionTypeUnavailable = Boolean(
+    selectedSession && !availableSessionTypeSet.has(normalizeSessionType(selectedSession.sessionType))
+  );
+  const sessionTypeUnavailableMessage = sessionTypeUnavailable
+    ? `${resolveSessionTypeLabel(selectedSessionType)} ${t('chatSessionTypeUnavailableSuffix')}`
+    : null;
+
+  return {
+    sessionTypeOptions,
+    defaultSessionType,
+    selectedSessionType,
+    canEditSessionType,
+    sessionTypeUnavailable,
+    sessionTypeUnavailableMessage
+  };
+}

package/src/components/common/MaskedInput.tsx

@@ -9,7 +9,7 @@ interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   isSet?: boolean;
 }
 
-export function MaskedInput({ maskedValue, isSet, className, value, onChange, placeholder, ...props }: MaskedInputProps) {
+export function MaskedInput({ isSet, className, value, onChange, placeholder, ...props }: MaskedInputProps) {
   const [showKey, setShowKey] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
   const hasUserInput = typeof value === 'string' && value.length > 0;

package/src/components/config/ProviderForm.tsx

@@ -32,6 +32,15 @@ type ProviderFormProps = {
   onProviderDeleted?: (providerName: string) => void;
 };
 
+type ProviderAuthMethodOption = {
+  id: string;
+};
+
+type PillSelectOption = {
+  value: string;
+  label: string;
+};
+
 const EMPTY_PROVIDER_CONFIG: ProviderConfigView = {
   displayName: '',
   apiKeySet: false,
@@ -151,6 +160,101 @@ function serializeModelsForSave(models: string[], defaultModels: string[]): stri
   return models;
 }
 
+function resolvePreferredAuthMethodId(params: {
+  providerName?: string;
+  methods: ProviderAuthMethodOption[];
+  defaultMethodId?: string;
+  language: 'zh' | 'en';
+}): string {
+  const { providerName, methods, defaultMethodId, language } = params;
+  if (methods.length === 0) {
+    return '';
+  }
+
+  const methodIdMap = new Map<string, string>();
+  for (const method of methods) {
+    const methodId = method.id.trim();
+    if (methodId) {
+      methodIdMap.set(methodId.toLowerCase(), methodId);
+    }
+  }
+
+  const pick = (...candidates: string[]): string | undefined => {
+    for (const candidate of candidates) {
+      const resolved = methodIdMap.get(candidate.toLowerCase());
+      if (resolved) {
+        return resolved;
+      }
+    }
+    return undefined;
+  };
+
+  const normalizedDefault = defaultMethodId?.trim();
+  if (providerName === 'minimax-portal') {
+    if (language === 'zh') {
+      return pick('cn', 'china-mainland') ?? pick(normalizedDefault ?? '') ?? methods[0]?.id ?? '';
+    }
+    if (language === 'en') {
+      return pick('global', 'intl', 'international') ?? pick(normalizedDefault ?? '') ?? methods[0]?.id ?? '';
+    }
+  }
+
+  if (normalizedDefault) {
+    const matchedDefault = pick(normalizedDefault);
+    if (matchedDefault) {
+      return matchedDefault;
+    }
+  }
+
+  if (language === 'zh') {
+    return pick('cn') ?? methods[0]?.id ?? '';
+  }
+  if (language === 'en') {
+    return pick('global') ?? methods[0]?.id ?? '';
+  }
+
+  return methods[0]?.id ?? '';
+}
+
+function shouldUsePillSelector(params: {
+  required: boolean;
+  hasDefault: boolean;
+  optionCount: number;
+}): boolean {
+  return params.required && params.hasDefault && params.optionCount > 1 && params.optionCount <= 3;
+}
+
+function PillSelector(props: {
+  value: string;
+  onChange: (value: string) => void;
+  options: PillSelectOption[];
+}) {
+  const { value, onChange, options } = props;
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {options.map((option) => {
+        const selected = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => onChange(option.value)}
+            aria-pressed={selected}
+            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
+              selected
+                ? 'border-primary bg-primary text-white shadow-sm'
+                : 'border-gray-200 bg-white text-gray-700 hover:border-primary/40 hover:text-primary'
+            }`}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
 export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormProps) {
   const queryClient = useQueryClient();
   const { data: config } = useConfig();
@@ -174,6 +278,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
   const [showModelInput, setShowModelInput] = useState(false);
   const [authSessionId, setAuthSessionId] = useState<string | null>(null);
   const [authStatusMessage, setAuthStatusMessage] = useState('');
+  const [authMethodId, setAuthMethodId] = useState('');
   const authPollTimerRef = useRef<number | null>(null);
 
   const providerSpec = meta?.providers.find((p) => p.name === providerName);
@@ -225,11 +330,63 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     apiBaseHint?.help ||
     t('providerApiBaseHelp');
   const providerAuth = providerSpec?.auth;
+  const providerAuthMethods = useMemo(
+    () => providerAuth?.methods ?? [],
+    [providerAuth?.methods]
+  );
+  const providerAuthMethodOptions = useMemo(
+    () =>
+      providerAuthMethods.map((method) => ({
+        value: method.id,
+        label: method.label?.[language] || method.label?.en || method.id
+      })),
+    [providerAuthMethods, language]
+  );
+  const preferredAuthMethodId = useMemo(
+    () => resolvePreferredAuthMethodId({
+      providerName,
+      methods: providerAuthMethods,
+      defaultMethodId: providerAuth?.defaultMethodId,
+      language
+    }),
+    [providerName, providerAuth?.defaultMethodId, providerAuthMethods, language]
+  );
+  const resolvedAuthMethodId = useMemo(() => {
+    if (!providerAuthMethods.length) {
+      return '';
+    }
+    const normalizedCurrent = authMethodId.trim();
+    if (normalizedCurrent && providerAuthMethods.some((method) => method.id === normalizedCurrent)) {
+      return normalizedCurrent;
+    }
+    return preferredAuthMethodId || providerAuthMethods[0]?.id || '';
+  }, [authMethodId, preferredAuthMethodId, providerAuthMethods]);
+  const selectedAuthMethod = useMemo(
+    () => providerAuthMethods.find((method) => method.id === resolvedAuthMethodId),
+    [providerAuthMethods, resolvedAuthMethodId]
+  );
+  const selectedAuthMethodHint =
+    selectedAuthMethod?.hint?.[language] || selectedAuthMethod?.hint?.en || '';
+  const shouldUseAuthMethodPills = shouldUsePillSelector({
+    required: providerAuth?.kind === 'device_code',
+    hasDefault: Boolean(providerAuth?.defaultMethodId?.trim()),
+    optionCount: providerAuthMethods.length
+  });
   const providerAuthNote =
     providerAuth?.note?.[language] ||
     providerAuth?.note?.en ||
     providerAuth?.displayName ||
     '';
+  const wireApiOptions = providerSpec?.wireApiOptions || ['auto', 'chat', 'responses'];
+  const wireApiSelectOptions: PillSelectOption[] = wireApiOptions.map((option) => ({
+    value: option,
+    label: option === 'chat' ? t('wireApiChat') : option === 'responses' ? t('wireApiResponses') : t('wireApiAuto')
+  }));
+  const shouldUseWireApiPills = shouldUsePillSelector({
+    required: Boolean(providerSpec?.supportsWireApi),
+    hasDefault: typeof providerSpec?.defaultWireApi === 'string' && providerSpec.defaultWireApi.length > 0,
+    optionCount: wireApiSelectOptions.length
+  });
 
   const clearAuthPollTimer = useCallback(() => {
     if (authPollTimerRef.current !== null) {
@@ -290,6 +447,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
       setProviderDisplayName('');
       setAuthSessionId(null);
       setAuthStatusMessage('');
+      setAuthMethodId('');
       clearAuthPollTimer();
       return;
     }
@@ -303,8 +461,18 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     setProviderDisplayName(effectiveDisplayName);
     setAuthSessionId(null);
     setAuthStatusMessage('');
+    setAuthMethodId(preferredAuthMethodId);
     clearAuthPollTimer();
-  }, [providerName, currentApiBase, resolvedProviderConfig.extraHeaders, currentWireApi, currentEditableModels, effectiveDisplayName, clearAuthPollTimer]);
+  }, [
+    providerName,
+    currentApiBase,
+    resolvedProviderConfig.extraHeaders,
+    currentWireApi,
+    currentEditableModels,
+    effectiveDisplayName,
+    preferredAuthMethodId,
+    clearAuthPollTimer
+  ]);
 
   useEffect(() => () => clearAuthPollTimer(), [clearAuthPollTimer]);
 
@@ -453,7 +621,10 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
 
     try {
       setAuthStatusMessage('');
-      const result = await startProviderAuth.mutateAsync({ provider: providerName });
+      const result = await startProviderAuth.mutateAsync({
+        provider: providerName,
+        data: resolvedAuthMethodId ? { methodId: resolvedAuthMethodId } : {}
+      });
       if (!result.sessionId || !result.verificationUri) {
         throw new Error(t('providerAuthStartFailed'));
       }
@@ -567,6 +738,34 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
               {providerAuthNote ? (
                 <p className="text-xs text-gray-600">{providerAuthNote}</p>
               ) : null}
+              {providerAuthMethods.length > 1 ? (
+                <div className="space-y-2">
+                  <Label className="text-xs font-medium text-gray-700">{t('providerAuthMethodLabel')}</Label>
+                  {shouldUseAuthMethodPills ? (
+                    <PillSelector
+                      value={resolvedAuthMethodId}
+                      onChange={setAuthMethodId}
+                      options={providerAuthMethodOptions}
+                    />
+                  ) : (
+                    <Select value={resolvedAuthMethodId} onValueChange={setAuthMethodId}>
+                      <SelectTrigger className="h-8 rounded-lg bg-white">
+                        <SelectValue placeholder={t('providerAuthMethodPlaceholder')} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {providerAuthMethodOptions.map((method) => (
+                          <SelectItem key={method.value} value={method.value}>
+                            {method.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )}
+                  {selectedAuthMethodHint ? (
+                    <p className="text-xs text-gray-500">{selectedAuthMethodHint}</p>
+                  ) : null}
+                </div>
+              ) : null}
               <div className="flex flex-wrap items-center gap-2">
                 <Button
                   type="button"
@@ -718,18 +917,26 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
                     <Label htmlFor="wireApi" className="text-sm font-medium text-gray-900">
                       {wireApiHint?.label ?? t('wireApi')}
                     </Label>
-                    <Select value={wireApi} onValueChange={(v) => setWireApi(v as WireApiType)}>
-                      <SelectTrigger className="rounded-xl">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {(providerSpec.wireApiOptions || ['auto', 'chat', 'responses']).map((option) => (
-                          <SelectItem key={option} value={option}>
-                            {option === 'chat' ? t('wireApiChat') : option === 'responses' ? t('wireApiResponses') : t('wireApiAuto')}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
+                    {shouldUseWireApiPills ? (
+                      <PillSelector
+                        value={wireApi}
+                        onChange={(v) => setWireApi(v as WireApiType)}
+                        options={wireApiSelectOptions}
+                      />
+                    ) : (
+                      <Select value={wireApi} onValueChange={(v) => setWireApi(v as WireApiType)}>
+                        <SelectTrigger className="rounded-xl">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {wireApiSelectOptions.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
                   </div>
                 )}