@nextclaw/ui 0.14.0 → 0.14.1-beta.1

package/src/features/chat/components/conversation/chat-conversation-panel.tsx

@@ -6,6 +6,9 @@ import { ChatConversationParentBanner } from "@/features/chat/components/convers
 import { ChatConversationSkeleton } from "@/features/chat/components/conversation/chat-conversation-skeleton";
 import { ChatConversationWorkspaceSection } from "@/features/chat/components/conversation/chat-conversation-workspace-section";
 import { useNcpChatProviderStateResolved } from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
+import { ChatConversationWelcome } from "@/features/chat/features/welcome/components/chat-conversation-welcome";
+import { shouldShowChatWelcome } from "@/features/chat/features/welcome/utils/chat-welcome-visibility.utils";
+import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 
 type ChatConversationLayoutMode = "desktop" | "mobile";
 
@@ -17,6 +20,9 @@ export function ChatConversationPanel({
   onBackToList?: () => void;
 }) {
   const isProviderStateResolved = useNcpChatProviderStateResolved();
+  const showWelcome = useChatThreadStore((state) =>
+    shouldShowChatWelcome(state.snapshot),
+  );
 
   if (!isProviderStateResolved) {
     return <ChatConversationSkeleton />;
@@ -31,8 +37,15 @@ export function ChatConversationPanel({
           onBackToList={onBackToList}
         />
         <ChatConversationAlerts />
-        <ChatConversationContent />
-        <ChatInputBarContainer />
+        <ChatConversationContent
+          showWelcome={showWelcome}
+          welcomeSlot={
+            <ChatConversationWelcome
+              inputSlot={<ChatInputBarContainer surface="embedded" />}
+            />
+          }
+        />
+        {showWelcome ? null : <ChatInputBarContainer />}
       </div>
 
       <ChatConversationWorkspaceSection layoutMode={layoutMode} />

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

@@ -8,21 +8,12 @@ import { usePresenter } from '@/features/chat/components/providers/chat-presente
 import { useI18n } from '@/app/components/i18n-provider';
 import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
 import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
-import {
-  useNcpChatProviderStateResolved,
-  useNcpChatSelectedSession,
-} from '@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state';
-import { useChatQueryStore } from '@/features/chat/stores/ncp-chat-query.store';
-import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
-import {
-  buildNcpChatProviderModelOptions,
-  filterNcpChatModelOptionsBySessionType,
-} from '@/features/chat/features/ncp/utils/ncp-chat-query-derived.utils';
-import { useChatSessionTypeState } from '@/features/chat/features/session-type/hooks/use-chat-session-type-state';
 import { chatRecentModelsManager, CHAT_RECENT_MODELS_MIN_OPTIONS } from '@/features/chat/managers/chat-recent-models.manager';
 import { chatRecentSkillsManager, CHAT_RECENT_SKILLS_MIN_OPTIONS } from '@/features/chat/managers/chat-recent-skills.manager';
 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';
@@ -30,7 +21,6 @@ import { t } from '@/shared/lib/i18n';
 import { toast } from 'sonner';
 
 type ChatInputStoreSnapshot = ReturnType<typeof useChatInputStore.getState>['snapshot'];
-const EMPTY_SESSION_SKILL_RECORDS: SessionSkillEntryView[] = [];
 
 function buildThinkingLabels(): Record<ChatThinkingLevel, string> {
   return {
@@ -100,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')
   };
@@ -173,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
       }
@@ -222,75 +267,11 @@ function buildSkillPicker(params: { allSkillsLabel: string; isSkillsLoading: boo
   });
 }
 
-function useChatInputBarQueryState(snapshot: ChatInputStoreSnapshot) {
-  const presenter = usePresenter();
-  const selectedSessionKey = useChatSessionListStore(
-    (state) => state.snapshot.selectedSessionKey,
-  );
-  const selectedSession = useNcpChatSelectedSession(selectedSessionKey);
-  const isProviderStateResolved = useNcpChatProviderStateResolved();
-  const config = useChatQueryStore(
-    (state) => state.snapshot.configQuery?.data ?? null,
-  );
-  const providersView = useChatQueryStore(
-    (state) => state.snapshot.providersQuery?.data ?? null,
-  );
-  const templatesView = useChatQueryStore(
-    (state) => state.snapshot.providerTemplatesQuery?.data ?? null,
-  );
-  const sessionTypesData = useChatQueryStore(
-    (state) => state.snapshot.sessionTypesQuery?.data ?? null,
-  );
-  const skillRecords = useChatQueryStore(
-    (state) =>
-      state.snapshot.sessionSkillsQuery?.data?.records ?? EMPTY_SESSION_SKILL_RECORDS,
-  );
-  const isSkillsLoading = useChatQueryStore(
-    (state) =>
-      Boolean(
-        state.snapshot.sessionSkillsQuery?.isLoading ||
-          state.snapshot.sessionSkillsQuery?.isFetching,
-      ),
-  );
-  const sessionTypeState = useChatSessionTypeState({
-    selectedSession,
-    pendingSessionType: snapshot.pendingSessionType,
-    setPendingSessionType: presenter.chatInputManager.setPendingSessionType,
-    sessionTypesData,
-  });
-  const providerModelOptions = useMemo(
-    () =>
-      buildNcpChatProviderModelOptions({
-        config,
-        providersView,
-        templatesView,
-      }),
-    [config, providersView, templatesView],
-  );
-  const modelOptions = useMemo(
-    () =>
-      filterNcpChatModelOptionsBySessionType({
-        modelOptions: providerModelOptions,
-        modelSelectionMode: sessionTypeState.selectedSessionTypeOption?.modelSelectionMode,
-        runtimeDefaultModelLabel: t('chatRuntimeDefaultModel'),
-        supportedModels: sessionTypeState.selectedSessionTypeOption?.supportedModels,
-      }),
-    [
-      providerModelOptions,
-      sessionTypeState.selectedSessionTypeOption?.modelSelectionMode,
-      sessionTypeState.selectedSessionTypeOption?.supportedModels,
-    ],
-  );
-
-  return {
-    isProviderStateResolved,
-    isSkillsLoading,
-    modelOptions,
-    skillRecords,
-  };
-}
+type ChatInputBarContainerProps = {
+  surface?: 'default' | 'embedded';
+};
 
-export function ChatInputBarContainer() {
+export function ChatInputBarContainer({ surface = 'default' }: ChatInputBarContainerProps) {
   const presenter = usePresenter();
   const { language } = useI18n();
   const { isMobile } = useViewportLayout();
@@ -306,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,
@@ -330,21 +319,67 @@ export function ChatInputBarContainer() {
     ? t('chatStopPreparing')
     : snapshot.stopDisabledReason?.trim() || t('chatStopUnavailable');
   const { handleFilesAdd, handleFileInputChange } = useChatInputBarAttachments({ attachmentSupported, inputBarRef });
+  useEffect(() => {
+    presenter.chatInputManager.syncSnapshot({
+      isProviderStateResolved: inputQueryState.isProviderStateResolved,
+      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,
+      sessionTypeUnavailable: inputQueryState.sessionTypeState.sessionTypeUnavailable,
+      sessionTypeUnavailableMessage: inputQueryState.sessionTypeState.sessionTypeUnavailableMessage,
+    });
+    presenter.chatInputManager.syncSessionPreferences({
+      selectedSessionKey: inputQueryState.selectedSessionKey,
+      selectedSessionExists: Boolean(inputQueryState.selectedSession),
+      selectedSessionPreferredModel: inputQueryState.selectedSession?.preferredModel,
+      selectedSessionPreferredThinking: inputQueryState.selectedSession?.preferredThinking ?? null,
+      fallbackPreferredModel: inputQueryState.fallbackPreferredModel,
+      fallbackPreferredThinking: inputQueryState.fallbackPreferredThinking,
+      defaultModel: inputQueryState.defaultModel,
+    });
+  }, [
+    inputQueryState.defaultModel,
+    inputQueryState.defaultProjectRoot,
+    inputQueryState.fallbackPreferredModel,
+    inputQueryState.fallbackPreferredThinking,
+    inputQueryState.isProviderStateResolved,
+    inputQueryState.modelOptions,
+    inputQueryState.selectedSession,
+    inputQueryState.selectedSessionKey,
+    inputQueryState.sessionTypeState.canEditSessionType,
+    inputQueryState.sessionTypeState.defaultSessionType,
+    inputQueryState.sessionTypeState.selectedSessionType,
+    inputQueryState.sessionTypeState.sessionTypeOptions,
+    inputQueryState.sessionTypeState.sessionTypeUnavailable,
+    inputQueryState.sessionTypeState.sessionTypeUnavailableMessage,
+    inputQueryState.skillRecords,
+    presenter.chatInputManager,
+  ]);
   useEffect(() => {
     const request = snapshot.composerFocusRequest;
     if (!request) {
       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) {
@@ -356,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,
@@ -374,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

@@ -0,0 +1,120 @@
+import { useMemo } from 'react';
+import type { NcpSessionSummaryView, SessionSkillEntryView } from '@/shared/lib/api';
+import { t } from '@/shared/lib/i18n';
+import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
+import {
+  buildNcpChatProviderModelOptions,
+  filterNcpChatModelOptionsBySessionType,
+} from '@/features/chat/features/ncp/utils/ncp-chat-query-derived.utils';
+import { useNcpChatProviderStateResolved } from '@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state';
+import { useChatSessionTypeState } from '@/features/chat/features/session-type/hooks/use-chat-session-type-state';
+import { adaptNcpSessionSummaries } from '@/features/chat/features/session/utils/ncp-session-adapter.utils';
+import { resolveRecentSessionPreferredValue } from '@/features/chat/features/session/utils/chat-session-preference-governance.utils';
+import { chatRecentModelsManager } from '@/features/chat/managers/chat-recent-models.manager';
+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[] = [];
+
+export function useChatInputBarQueryState(snapshot: ChatInputSnapshot) {
+  const presenter = usePresenter();
+  const selectedSessionKey = useChatSessionListStore(
+    (state) => state.snapshot.selectedSessionKey,
+  );
+  const isProviderStateResolved = useNcpChatProviderStateResolved();
+  const querySnapshot = useChatQueryStore((state) => state.snapshot);
+  const config = querySnapshot.configQuery?.data ?? null;
+  const sessionSummaries =
+    querySnapshot.sessionsQuery?.data?.sessions ?? EMPTY_NCP_SESSION_SUMMARIES;
+  const skillRecords =
+    querySnapshot.sessionSkillsQuery?.data?.records ?? EMPTY_SESSION_SKILL_RECORDS;
+  const isSkillsLoading = Boolean(
+    querySnapshot.sessionSkillsQuery?.isLoading ||
+      querySnapshot.sessionSkillsQuery?.isFetching,
+  );
+  const sessions = useMemo(
+    () => adaptNcpSessionSummaries(sessionSummaries),
+    [sessionSummaries],
+  );
+  const selectedSession = useMemo(
+    () => sessions.find((session) => session.key === selectedSessionKey) ?? null,
+    [selectedSessionKey, sessions],
+  );
+  const sessionTypeState = useChatSessionTypeState({
+    selectedSession,
+    pendingSessionType: snapshot.pendingSessionType,
+    setPendingSessionType: presenter.chatInputManager.setPendingSessionType,
+    sessionTypesData: querySnapshot.sessionTypesQuery?.data ?? null,
+  });
+  const providerModelOptions = useMemo(
+    () =>
+      buildNcpChatProviderModelOptions({
+        config,
+        providersView: querySnapshot.providersQuery?.data ?? null,
+        templatesView: querySnapshot.providerTemplatesQuery?.data ?? null,
+      }),
+    [config, querySnapshot.providerTemplatesQuery?.data, querySnapshot.providersQuery?.data],
+  );
+  const modelOptions = useMemo(
+    () =>
+      filterNcpChatModelOptionsBySessionType({
+        modelOptions: providerModelOptions,
+        modelSelectionMode: sessionTypeState.selectedSessionTypeOption?.modelSelectionMode,
+        runtimeDefaultThinkingCapability:
+          sessionTypeState.selectedSessionTypeOption?.runtimeDefaultThinking ?? null,
+        runtimeDefaultModelLabel: t('chatRuntimeDefaultModel'),
+        supportedModels: sessionTypeState.selectedSessionTypeOption?.supportedModels,
+      }),
+    [
+      providerModelOptions,
+      sessionTypeState.selectedSessionTypeOption?.modelSelectionMode,
+      sessionTypeState.selectedSessionTypeOption?.runtimeDefaultThinking,
+      sessionTypeState.selectedSessionTypeOption?.supportedModels,
+    ],
+  );
+  const availableModelValueSet = useMemo(
+    () => new Set(modelOptions.map((option) => option.value)),
+    [modelOptions],
+  );
+  const recentSessionTypeModel = chatRecentModelsManager
+    .read({ namespace: sessionTypeState.selectedSessionType })
+    .find((value) => availableModelValueSet.has(value));
+  const fallbackPreferredModel = useMemo(
+    () =>
+      recentSessionTypeModel ??
+      resolveRecentSessionPreferredValue<string>({
+        sessions,
+        selectedSessionKey,
+        sessionType: sessionTypeState.selectedSessionType,
+        readPreference: (session) => session.preferredModel?.trim() || undefined,
+      }),
+    [recentSessionTypeModel, selectedSessionKey, sessionTypeState.selectedSessionType, sessions],
+  );
+  const fallbackPreferredThinking = useMemo(
+    () =>
+      resolveRecentSessionPreferredValue({
+        sessions,
+        selectedSessionKey,
+        sessionType: sessionTypeState.selectedSessionType,
+        readPreference: (session) => session.preferredThinking ?? undefined,
+      }),
+    [selectedSessionKey, sessionTypeState.selectedSessionType, sessions],
+  );
+
+  return {
+    defaultModel: config?.agents.defaults.model,
+    defaultProjectRoot: normalizeSessionProjectRootValue(config?.agents.defaults.workspace),
+    fallbackPreferredModel,
+    fallbackPreferredThinking,
+    isProviderStateResolved,
+    isSkillsLoading,
+    modelOptions,
+    selectedSession,
+    selectedSessionKey,
+    sessionTypeState,
+    skillRecords,
+  };
+}

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

@@ -0,0 +1,87 @@
+import { useCallback, useMemo } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  fetchPreference,
+  updatePreference,
+  type PreferenceEntryView,
+  type PreferenceJsonValue,
+} from '@/shared/lib/api';
+
+const CHAT_MODEL_FAVORITES_PREFERENCE_KEY = '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,
+  };
+}