@nextclaw/ui 0.14.1-beta.0 → 0.14.1

package/src/features/chat/features/input/components/chat-input-bar.container.tsx

@@ -13,6 +13,7 @@ import { chatRecentSkillsManager, CHAT_RECENT_SKILLS_MIN_OPTIONS } from '@/featu
 import { deriveSelectedSkillsFromComposer } from '@/features/chat/features/input/utils/chat-composer-state.utils';
 import { hasNcpChatModelOptions, isNcpChatComposerDisabled, isNcpChatModelOptionsEmpty, isNcpChatModelOptionsLoading, isNcpChatSendDisabled } from '@/features/chat/features/input/utils/ncp-chat-input-availability.utils';
 import { useChatInputBarQueryState } from '@/features/chat/features/input/hooks/use-chat-input-bar-query-state';
+import { useChatModelFavorites } from '@/features/chat/features/input/hooks/use-chat-model-favorites';
 import { useSelectedSessionContextWindowIndicator } from '@/features/chat/features/session/hooks/use-selected-session-context-window-indicator';
 import { useSystemStatus } from '@/features/system-status';
 import { isNcpChatRuntimeBlocked } from '@/features/chat/features/runtime/utils/ncp-chat-runtime-availability.utils';
@@ -89,6 +90,11 @@ function useChatInputBarLabels(language: string) {
     slashTexts,
     recentModelsLabel: t('chatPickerRecentModels'),
     allModelsLabel: t('chatPickerAllModels'),
+    favoriteModelsLabel: t('chatPickerFavoriteModels'),
+    modelSearchPlaceholder: t('chatModelSearchPlaceholder'),
+    modelSearchEmptyLabel: t('chatModelSearchEmpty'),
+    favoriteModelLabel: t('chatFavoriteModel'),
+    unfavoriteModelLabel: t('chatUnfavoriteModel'),
     recentSkillsLabel: t('chatPickerRecent'),
     allSkillsLabel: t('chatPickerAllSkills')
   };
@@ -162,19 +168,69 @@ function useChatInputBarAttachments(params: { attachmentSupported: boolean; inpu
     }, [handleFilesAdd])
   };
 }
-function buildToolbarSelects(params: { allModelsLabel: string; hasModelOptions: boolean; isModelOptionsLoading: boolean; modelRecords: ChatModelRecord[]; onModelChange: (value: string) => void; onThinkingChange: (value: ChatThinkingLevel | null) => void; recentModelValues: string[]; recentModelsLabel: string; selectedModel: string; selectedThinkingLevel: ChatThinkingLevel | null; thinkingSupportedLevels: ChatThinkingLevel[]; thinkingDefaultLevel: ChatThinkingLevel | null; }) {
-  const { allModelsLabel, hasModelOptions, isModelOptionsLoading, modelRecords, onModelChange, onThinkingChange, recentModelValues, recentModelsLabel, selectedModel, selectedThinkingLevel, thinkingSupportedLevels, thinkingDefaultLevel } = params;
+
+type ToolbarSelectBuildParams = {
+  allModelsLabel: string;
+  favoriteModelLabel: string;
+  favoriteModelValues: string[];
+  favoriteModelsLabel: string;
+  hasModelOptions: boolean;
+  isModelOptionsLoading: boolean;
+  modelRecords: ChatModelRecord[];
+  modelSearchEmptyLabel: string;
+  modelSearchPlaceholder: string;
+  onFavoriteModelToggle: (value: string, favorite: boolean) => void;
+  onModelChange: (value: string) => void;
+  onThinkingChange: (value: ChatThinkingLevel | null) => void;
+  recentModelValues: string[];
+  recentModelsLabel: string;
+  selectedModel: string;
+  selectedThinkingLevel: ChatThinkingLevel | null;
+  thinkingDefaultLevel: ChatThinkingLevel | null;
+  thinkingSupportedLevels: ChatThinkingLevel[];
+  unfavoriteModelLabel: string;
+};
+
+function buildToolbarSelects(params: ToolbarSelectBuildParams) {
+  const {
+    allModelsLabel,
+    favoriteModelLabel,
+    favoriteModelValues,
+    favoriteModelsLabel,
+    hasModelOptions,
+    isModelOptionsLoading,
+    modelRecords,
+    modelSearchEmptyLabel,
+    modelSearchPlaceholder,
+    onFavoriteModelToggle,
+    onModelChange,
+    onThinkingChange,
+    recentModelValues,
+    recentModelsLabel,
+    selectedModel,
+    selectedThinkingLevel,
+    thinkingDefaultLevel,
+    thinkingSupportedLevels,
+    unfavoriteModelLabel
+  } = params;
   return [
     buildModelToolbarSelect({
       modelOptions: modelRecords,
+      favoriteModelValues,
       recentModelValues,
       selectedModel,
       isModelOptionsLoading,
       hasModelOptions,
+      onFavoriteToggle: onFavoriteModelToggle,
       onValueChange: onModelChange,
       texts: {
         modelSelectPlaceholder: t('chatSelectModel'),
         modelNoOptionsLabel: t('chatModelNoOptions'),
+        modelSearchPlaceholder,
+        modelSearchEmptyLabel,
+        favoriteModelsLabel,
+        favoriteModelLabel,
+        unfavoriteModelLabel,
         recentModelsLabel,
         allModelsLabel
       }
@@ -211,7 +267,11 @@ function buildSkillPicker(params: { allSkillsLabel: string; isSkillsLoading: boo
   });
 }
 
-export function ChatInputBarContainer() {
+type ChatInputBarContainerProps = {
+  surface?: 'default' | 'embedded';
+};
+
+export function ChatInputBarContainer({ surface = 'default' }: ChatInputBarContainerProps) {
   const presenter = usePresenter();
   const { language } = useI18n();
   const { isMobile } = useViewportLayout();
@@ -227,6 +287,14 @@ export function ChatInputBarContainer() {
     skillRecords: inputQueryState.skillRecords,
     skillScopeLabels: labels.skillScopeLabels
   });
+  const modelRecordValues = useMemo(
+    () => modelRecords.map((option) => option.value),
+    [modelRecords]
+  );
+  const {
+    favoriteModelValues,
+    setModelFavorite,
+  } = useChatModelFavorites(modelRecordValues);
   const availabilitySnapshot = {
     ...snapshot,
     isProviderStateResolved: inputQueryState.isProviderStateResolved,
@@ -257,6 +325,7 @@ export function ChatInputBarContainer() {
       modelOptions: inputQueryState.modelOptions,
       skillRecords: inputQueryState.skillRecords,
       defaultSessionType: inputQueryState.sessionTypeState.defaultSessionType,
+      defaultProjectRoot: inputQueryState.defaultProjectRoot,
       sessionTypeOptions: inputQueryState.sessionTypeState.sessionTypeOptions,
       selectedSessionType: inputQueryState.sessionTypeState.selectedSessionType,
       canEditSessionType: inputQueryState.sessionTypeState.canEditSessionType,
@@ -274,6 +343,7 @@ export function ChatInputBarContainer() {
     });
   }, [
     inputQueryState.defaultModel,
+    inputQueryState.defaultProjectRoot,
     inputQueryState.fallbackPreferredModel,
     inputQueryState.fallbackPreferredThinking,
     inputQueryState.isProviderStateResolved,
@@ -295,15 +365,21 @@ export function ChatInputBarContainer() {
       return;
     }
     if (request.placement === 'end') {
-      inputBarRef.current?.focusComposerAtEnd();
+      inputBarRef.current?.focusComposerAtEnd(snapshot.composerNodes);
     }
     presenter.chatInputManager.consumeComposerFocusRequest(request.id);
-  }, [presenter.chatInputManager, snapshot.composerFocusRequest]);
+  }, [presenter.chatInputManager, snapshot.composerFocusRequest, snapshot.composerNodes]);
   const toolbarSelects = buildToolbarSelects({
     allModelsLabel: labels.allModelsLabel,
+    favoriteModelLabel: labels.favoriteModelLabel,
+    favoriteModelValues,
+    favoriteModelsLabel: labels.favoriteModelsLabel,
     hasModelOptions,
     isModelOptionsLoading,
     modelRecords,
+    modelSearchEmptyLabel: labels.modelSearchEmptyLabel,
+    modelSearchPlaceholder: labels.modelSearchPlaceholder,
+    onFavoriteModelToggle: setModelFavorite,
     onModelChange: presenter.chatInputManager.selectModel,
     onThinkingChange: (value) => {
       if (value) {
@@ -315,7 +391,8 @@ export function ChatInputBarContainer() {
     selectedModel: snapshot.selectedModel,
     selectedThinkingLevel: snapshot.selectedThinkingLevel as ChatThinkingLevel | null,
     thinkingSupportedLevels,
-    thinkingDefaultLevel: selectedModelOption?.thinkingCapability?.default ?? null
+    thinkingDefaultLevel: selectedModelOption?.thinkingCapability?.default ?? null,
+    unfavoriteModelLabel: labels.unfavoriteModelLabel
   });
   const skillPicker = buildSkillPicker({
     allSkillsLabel: labels.allSkillsLabel,
@@ -333,6 +410,7 @@ export function ChatInputBarContainer() {
     <>
       <ChatInputBar
         ref={inputBarRef}
+        surface={surface}
         composer={{
           nodes: snapshot.composerNodes,
           placeholder: textareaPlaceholder,

package/src/features/chat/features/input/hooks/use-chat-input-bar-query-state.ts

@@ -14,6 +14,7 @@ import { chatRecentModelsManager } from '@/features/chat/managers/chat-recent-mo
 import type { ChatInputSnapshot } from '@/features/chat/stores/chat-input.store';
 import { useChatQueryStore } from '@/features/chat/stores/ncp-chat-query.store';
 import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
+import { normalizeSessionProjectRootValue } from '@/shared/lib/session-project';
 
 const EMPTY_SESSION_SKILL_RECORDS: SessionSkillEntryView[] = [];
 const EMPTY_NCP_SESSION_SUMMARIES: NcpSessionSummaryView[] = [];
@@ -105,6 +106,7 @@ export function useChatInputBarQueryState(snapshot: ChatInputSnapshot) {
 
   return {
     defaultModel: config?.agents.defaults.model,
+    defaultProjectRoot: normalizeSessionProjectRootValue(config?.agents.defaults.workspace),
     fallbackPreferredModel,
     fallbackPreferredThinking,
     isProviderStateResolved,

package/src/features/chat/features/input/hooks/use-chat-model-favorites.ts

@@ -0,0 +1,88 @@
+import { useCallback, useMemo } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  fetchPreference,
+  PREFERENCE_KEYS,
+  updatePreference,
+  type PreferenceEntryView,
+  type PreferenceJsonValue,
+} from '@/shared/lib/api';
+
+const CHAT_MODEL_FAVORITES_PREFERENCE_KEY = PREFERENCE_KEYS.chat.modelFavorites;
+const chatModelFavoritesQueryKey = ['preference', CHAT_MODEL_FAVORITES_PREFERENCE_KEY] as const;
+
+function normalizeFavoriteModelValues(value: PreferenceJsonValue | null | undefined): string[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  const values: string[] = [];
+  for (const item of value) {
+    if (typeof item !== 'string') {
+      continue;
+    }
+    const normalized = item.trim();
+    if (normalized && !values.includes(normalized)) {
+      values.push(normalized);
+    }
+  }
+  return values;
+}
+
+export function useChatModelFavorites(availableModelValues: string[]) {
+  const queryClient = useQueryClient();
+  const availableModelValueSet = useMemo(
+    () => new Set(availableModelValues),
+    [availableModelValues],
+  );
+  const favoritesQuery = useQuery({
+    queryKey: chatModelFavoritesQueryKey,
+    queryFn: () => fetchPreference(CHAT_MODEL_FAVORITES_PREFERENCE_KEY),
+    staleTime: 30_000,
+  });
+  const favoriteModelValues = useMemo(
+    () => normalizeFavoriteModelValues(favoritesQuery.data?.value),
+    [favoritesQuery.data?.value],
+  );
+  const visibleFavoriteModelValues = useMemo(
+    () => favoriteModelValues.filter((value) => availableModelValueSet.has(value)),
+    [availableModelValueSet, favoriteModelValues],
+  );
+  const updateFavorites = useMutation({
+    mutationFn: async (values: string[]) =>
+      await updatePreference(CHAT_MODEL_FAVORITES_PREFERENCE_KEY, values),
+    onMutate: async (values) => {
+      await queryClient.cancelQueries({ queryKey: chatModelFavoritesQueryKey });
+      const previous = queryClient.getQueryData<PreferenceEntryView>(chatModelFavoritesQueryKey);
+      queryClient.setQueryData<PreferenceEntryView>(chatModelFavoritesQueryKey, {
+        key: CHAT_MODEL_FAVORITES_PREFERENCE_KEY,
+        value: values,
+        updatedAt: new Date().toISOString(),
+      });
+      return { previous };
+    },
+    onError: (_error, _values, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(chatModelFavoritesQueryKey, context.previous);
+      }
+    },
+    onSuccess: (entry) => {
+      queryClient.setQueryData(chatModelFavoritesQueryKey, entry);
+    },
+  });
+  const setModelFavorite = useCallback((value: string, favorite: boolean) => {
+    const normalized = value.trim();
+    if (!normalized) {
+      return;
+    }
+    const next = favorite
+      ? [normalized, ...favoriteModelValues.filter((item) => item !== normalized)]
+      : favoriteModelValues.filter((item) => item !== normalized);
+    updateFavorites.mutate(next);
+  }, [favoriteModelValues, updateFavorites]);
+
+  return {
+    favoriteModelValues: visibleFavoriteModelValues,
+    isLoading: favoritesQuery.isLoading,
+    setModelFavorite,
+  };
+}

package/src/features/chat/features/input/utils/__tests__/chat-input-bar.utils.test.ts

@@ -13,6 +13,20 @@ function createSkillRecord(partial: Partial<ChatSkillRecord>): ChatSkillRecord {
   };
 }
 
+function createModelTexts() {
+  return {
+    modelSelectPlaceholder: 'Select model',
+    modelNoOptionsLabel: 'No models',
+    modelSearchPlaceholder: 'Search models',
+    modelSearchEmptyLabel: 'No matching models',
+    favoriteModelsLabel: 'Favorites',
+    favoriteModelLabel: 'Favorite model',
+    unfavoriteModelLabel: 'Remove favorite',
+    recentModelsLabel: 'Recent',
+    allModelsLabel: 'All models'
+  };
+}
+
 describe('buildChatSlashItems', () => {
   const texts = {
     slashSkillSubtitle: 'Skill',
@@ -188,12 +202,7 @@ describe('buildModelToolbarSelect', () => {
       isModelOptionsLoading: false,
       hasModelOptions: true,
       onValueChange,
-      texts: {
-        modelSelectPlaceholder: 'Select model',
-        modelNoOptionsLabel: 'No models',
-        recentModelsLabel: 'Recent',
-        allModelsLabel: 'All models'
-      }
+      texts: createModelTexts()
     });
 
     expect(select.value).toBe('minimax/MiniMax-M2.7');
@@ -218,12 +227,7 @@ describe('buildModelToolbarSelect', () => {
       isModelOptionsLoading: false,
       hasModelOptions: true,
       onValueChange: vi.fn(),
-      texts: {
-        modelSelectPlaceholder: 'Select model',
-        modelNoOptionsLabel: 'No models',
-        recentModelsLabel: 'Recent',
-        allModelsLabel: 'All models'
-      }
+      texts: createModelTexts()
     });
 
     expect(select.selectedLabel).toBe('Anthropic/claude-sonnet-4-very-long-name');
@@ -254,12 +258,7 @@ describe('buildModelToolbarSelect', () => {
       isModelOptionsLoading: false,
       hasModelOptions: true,
       onValueChange: vi.fn(),
-      texts: {
-        modelSelectPlaceholder: 'Select model',
-        modelNoOptionsLabel: 'No models',
-        recentModelsLabel: 'Recent',
-        allModelsLabel: 'All models'
-      }
+      texts: createModelTexts()
     });
 
     expect(select.groups).toEqual([
@@ -290,6 +289,52 @@ describe('buildModelToolbarSelect', () => {
     ]);
   });
 
+  it('groups favorite models ahead of recent models without duplicates', () => {
+    const onFavoriteToggle = vi.fn();
+    const select = buildModelToolbarSelect({
+      modelOptions: [
+        {
+          value: 'openai/gpt-5',
+          modelLabel: 'gpt-5',
+          providerLabel: 'OpenAI'
+        },
+        {
+          value: 'anthropic/claude-sonnet-4',
+          modelLabel: 'claude-sonnet-4',
+          providerLabel: 'Anthropic'
+        },
+        {
+          value: 'minimax/MiniMax-M2.7',
+          modelLabel: 'MiniMax-M2.7',
+          providerLabel: 'MiniMax'
+        }
+      ],
+      favoriteModelValues: ['openai/gpt-5'],
+      recentModelValues: ['anthropic/claude-sonnet-4', 'openai/gpt-5'],
+      selectedModel: 'openai/gpt-5',
+      isModelOptionsLoading: false,
+      hasModelOptions: true,
+      onFavoriteToggle,
+      onValueChange: vi.fn(),
+      texts: createModelTexts()
+    });
+
+    expect(select.groups?.map((group) => group.key)).toEqual([
+      'favorite-models',
+      'recent-models',
+      'all-models'
+    ]);
+    expect(select.groups?.[0]?.options.map((option) => option.value)).toEqual(['openai/gpt-5']);
+    expect(select.groups?.[1]?.options.map((option) => option.value)).toEqual(['anthropic/claude-sonnet-4']);
+    expect(select.groups?.[2]?.options.map((option) => option.value)).toEqual(['minimax/MiniMax-M2.7']);
+    expect(select.optionAction).toMatchObject({
+      kind: 'favorite',
+      activeValues: ['openai/gpt-5'],
+      activeLabel: 'Remove favorite',
+      inactiveLabel: 'Favorite model'
+    });
+  });
+
   it('preserves recent model order from newest to oldest', () => {
     const select = buildModelToolbarSelect({
       modelOptions: [
@@ -314,12 +359,7 @@ describe('buildModelToolbarSelect', () => {
       isModelOptionsLoading: false,
       hasModelOptions: true,
       onValueChange: vi.fn(),
-      texts: {
-        modelSelectPlaceholder: 'Select model',
-        modelNoOptionsLabel: 'No models',
-        recentModelsLabel: 'Recent',
-        allModelsLabel: 'All models'
-      }
+      texts: createModelTexts()
     });
 
     expect(select.groups?.[0]?.options.map((option) => option.value)).toEqual([

package/src/features/chat/features/input/utils/__tests__/ncp-chat-input-availability.utils.test.ts

@@ -19,6 +19,7 @@ function createSnapshot(
     pendingSessionType: 'native',
     pendingProjectRoot: null,
     pendingProjectRootSessionKey: null,
+    defaultProjectRoot: null,
     defaultSessionType: 'native',
     canStopGeneration: false,
     stopDisabledReason: null,

package/src/features/chat/features/input/utils/chat-input-bar.utils.ts

@@ -208,8 +208,17 @@ export function buildSkillPickerModel(params: {
     allSkillsLabel: string;
   };
 }): ChatSkillPickerProps {
-  const prioritizedSkillRecords = prioritizeSkillRecords(params.skillRecords, params.recentSkillValues ?? []);
-  const recentKeySet = new Set(params.groupedRecentSkillValues ?? []);
+  const {
+    groupedRecentSkillValues,
+    isLoading,
+    onSelectedKeysChange,
+    recentSkillValues,
+    selectedSkills,
+    skillRecords,
+    texts,
+  } = params;
+  const prioritizedSkillRecords = prioritizeSkillRecords(skillRecords, recentSkillValues ?? []);
+  const recentKeySet = new Set(groupedRecentSkillValues ?? []);
   const recentSkillOptions = buildSkillPickerOptions(
     prioritizedSkillRecords.filter((record) => recentKeySet.has(record.key))
   );
@@ -217,12 +226,12 @@ export function buildSkillPickerModel(params: {
     prioritizedSkillRecords.filter((record) => !recentKeySet.has(record.key))
   );
   return {
-    title: params.texts.title,
-    searchPlaceholder: params.texts.searchPlaceholder,
-    emptyLabel: params.texts.emptyLabel,
-    loadingLabel: params.texts.loadingLabel,
-    isLoading: params.isLoading,
-    manageLabel: params.texts.manageLabel,
+    title: texts.title,
+    searchPlaceholder: texts.searchPlaceholder,
+    emptyLabel: texts.emptyLabel,
+    loadingLabel: texts.loadingLabel,
+    isLoading,
+    manageLabel: texts.manageLabel,
     manageHref: '/marketplace/skills',
     options: buildSkillPickerOptions(prioritizedSkillRecords),
     groups:
@@ -230,17 +239,17 @@ export function buildSkillPickerModel(params: {
         ? [
             {
               key: 'recent-skills',
-              label: params.texts.recentSkillsLabel,
+              label: texts.recentSkillsLabel,
               options: recentSkillOptions
             },
             {
               key: 'all-skills',
-              label: params.texts.allSkillsLabel,
+              label: texts.allSkillsLabel,
               options: remainingSkillOptions
             }
           ].filter((group) => group.options.length > 0)
         : undefined,
-    selectedKeys: params.selectedSkills,
-    onSelectedKeysChange: params.onSelectedKeysChange
+    selectedKeys: selectedSkills,
+    onSelectedKeysChange
   };
 }

package/src/features/chat/features/input/utils/chat-input-toolbar.utils.ts

@@ -35,10 +35,16 @@ export function buildModelStateHint(params: {
     "noModelOptionsLabel" | "configureProviderLabel"
   >;
 }): ChatInlineHint | null {
-  if (!params.isModelOptionsLoading && !params.isModelOptionsEmpty) {
+  const {
+    isModelOptionsEmpty,
+    isModelOptionsLoading,
+    onGoToProviders,
+    texts,
+  } = params;
+  if (!isModelOptionsLoading && !isModelOptionsEmpty) {
     return null;
   }
-  if (params.isModelOptionsLoading) {
+  if (isModelOptionsLoading) {
     return {
       tone: "neutral",
       loading: true,
@@ -46,25 +52,40 @@ export function buildModelStateHint(params: {
   }
   return {
     tone: "warning",
-    text: params.texts.noModelOptionsLabel,
-    actionLabel: params.texts.configureProviderLabel,
-    onAction: params.onGoToProviders,
+    text: texts.noModelOptionsLabel,
+    actionLabel: texts.configureProviderLabel,
+    onAction: onGoToProviders,
   };
 }
 
 export function buildModelToolbarSelect({
-  modelOptions, recentModelValues, selectedModel, isModelOptionsLoading, hasModelOptions, onValueChange, texts,
+  modelOptions,
+  favoriteModelValues,
+  recentModelValues,
+  selectedModel,
+  isModelOptionsLoading,
+  hasModelOptions,
+  onFavoriteToggle,
+  onValueChange,
+  texts,
 }: {
   modelOptions: ChatModelRecord[];
+  favoriteModelValues?: string[];
   recentModelValues?: string[];
   selectedModel: string;
   isModelOptionsLoading: boolean;
   hasModelOptions: boolean;
+  onFavoriteToggle?: (value: string, favorite: boolean) => void;
   onValueChange: (value: string) => void;
   texts: Pick<
     ChatInputBarAdapterTexts,
     | "modelSelectPlaceholder"
     | "modelNoOptionsLabel"
+    | "modelSearchPlaceholder"
+    | "modelSearchEmptyLabel"
+    | "favoriteModelsLabel"
+    | "favoriteModelLabel"
+    | "unfavoriteModelLabel"
     | "recentModelsLabel"
     | "allModelsLabel"
   >;
@@ -76,19 +97,33 @@ export function buildModelToolbarSelect({
   const resolvedValue = hasModelOptions
     ? resolvedModelOption?.value
     : undefined;
-  const recentValueSet = new Set(recentModelValues ?? []);
   const modelOptionMap = new Map(
     modelOptions.map((option) => [option.value, option] as const),
   );
-  const recentOptions = (recentModelValues ?? [])
+  const favoriteOptions = (favoriteModelValues ?? [])
     .map((value) => modelOptionMap.get(value))
     .filter((option): option is ChatModelRecord => Boolean(option));
+  const favoriteValueSet = new Set(favoriteOptions.map((option) => option.value));
+  const recentOptions = (recentModelValues ?? [])
+    .map((value) => modelOptionMap.get(value))
+    .filter(
+      (option): option is ChatModelRecord =>
+        option !== undefined && !favoriteValueSet.has(option.value),
+    );
+  const recentValueSet = new Set(recentOptions.map((option) => option.value));
   const remainingOptions = modelOptions.filter(
-    (option) => !recentValueSet.has(option.value),
+    (option) => !favoriteValueSet.has(option.value) && !recentValueSet.has(option.value),
   );
-  const optionGroups =
-    recentOptions.length > 0
-      ? [
+  const optionGroups = favoriteOptions.length > 0 || recentOptions.length > 0
+    ? [
+          {
+            key: "favorite-models",
+            label: texts.favoriteModelsLabel,
+            options: favoriteOptions.map((option) => ({
+              value: option.value,
+              label: formatModelOptionLabel(option),
+            })),
+          },
           {
             key: "recent-models",
             label: texts.recentModelsLabel,
@@ -106,7 +141,7 @@ export function buildModelToolbarSelect({
             })),
           },
         ].filter((group) => group.options.length > 0)
-      : undefined;
+    : undefined;
 
   return {
     key: "model",
@@ -124,6 +159,19 @@ export function buildModelToolbarSelect({
     disabled: !hasModelOptions,
     loading: isModelOptionsLoading,
     emptyLabel: texts.modelNoOptionsLabel,
+    search: {
+      placeholder: texts.modelSearchPlaceholder,
+      emptyLabel: texts.modelSearchEmptyLabel,
+    },
+    optionAction: onFavoriteToggle
+      ? {
+          kind: "favorite",
+          activeValues: favoriteOptions.map((option) => option.value),
+          activeLabel: texts.unfavoriteModelLabel,
+          inactiveLabel: texts.favoriteModelLabel,
+          onToggle: onFavoriteToggle,
+        }
+      : undefined,
     onValueChange,
   };
 }
@@ -135,31 +183,38 @@ export function buildThinkingToolbarSelect(params: {
   onValueChange: (value: ChatThinkingLevel) => void;
   texts: Pick<ChatInputBarAdapterTexts, "thinkingLabels">;
 }): ChatToolbarSelect | null {
-  if (params.supportedLevels.length === 0) {
+  const {
+    defaultThinkingLevel,
+    onValueChange,
+    selectedThinkingLevel,
+    supportedLevels,
+    texts,
+  } = params;
+  if (supportedLevels.length === 0) {
     return null;
   }
 
-  const options = normalizeThinkingLevels(params.supportedLevels);
+  const options = normalizeThinkingLevels(supportedLevels);
   const fallback = options.includes("off") ? "off" : options[0];
   const resolvedValue =
-    (params.selectedThinkingLevel &&
-      options.includes(params.selectedThinkingLevel) &&
-      params.selectedThinkingLevel) ||
-    (params.defaultThinkingLevel &&
-      options.includes(params.defaultThinkingLevel) &&
-      params.defaultThinkingLevel) ||
+    (selectedThinkingLevel &&
+      options.includes(selectedThinkingLevel) &&
+      selectedThinkingLevel) ||
+    (defaultThinkingLevel &&
+      options.includes(defaultThinkingLevel) &&
+      defaultThinkingLevel) ||
     fallback;
 
   return {
     key: "thinking",
     value: resolvedValue,
-    placeholder: params.texts.thinkingLabels[resolvedValue],
-    selectedLabel: params.texts.thinkingLabels[resolvedValue],
+    placeholder: texts.thinkingLabels[resolvedValue],
+    selectedLabel: texts.thinkingLabels[resolvedValue],
     icon: "brain",
     options: options.map((level) => ({
       value: level,
-      label: params.texts.thinkingLabels[level],
+      label: texts.thinkingLabels[level],
     })),
-    onValueChange: (value) => params.onValueChange(value as ChatThinkingLevel),
+    onValueChange: (value) => onValueChange(value as ChatThinkingLevel),
   };
 }