feat(webui): link model picker to settings

webui/src/components/thread/ModelPresetBadge.tsx

@@ -6,7 +6,7 @@ import {
   type KeyboardEvent,
   type PointerEvent,
 } from "react";
-import { Check, CircleHelp, Sparkles } from "lucide-react";
+import { Check, CircleHelp, SlidersHorizontal, Sparkles } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import {
@@ -85,6 +85,7 @@ interface ModelPresetBadgeProps {
   modelPreset?: string | null;
   modelPresets?: ModelPresetOption[];
   onPresetChange?: (name: string) => void;
+  onManageModels?: () => void;
   onRequestComposerFocus?: () => void;
   provider?: string | null;
   providerLabel?: string | null;
@@ -100,6 +101,7 @@ export function ModelPresetBadge({
   modelPreset,
   modelPresets = [],
   onPresetChange,
+  onManageModels,
   onRequestComposerFocus,
   provider,
   providerLabel,
@@ -156,6 +158,11 @@ export function ModelPresetBadge({
     requestAnimationFrame(() => onRequestComposerFocus?.());
   };
 
+  const openModelSettings = () => {
+    setOpen(false);
+    onManageModels?.();
+  };
+
   const clearGesture = () => {
     const gesture = gestureRef.current;
     if (gesture?.timer) clearTimeout(gesture.timer);
@@ -418,6 +425,22 @@ export function ModelPresetBadge({
             />
           ))}
         </div>
+        {onManageModels ? (
+          <div className="mt-1 border-t border-border/55 pt-1">
+            <button
+              type="button"
+              onClick={openModelSettings}
+              className={cn(
+                floatingItemClassName,
+                floatingItemFocusClassName,
+                "flex min-h-9 w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-sm font-medium text-muted-foreground hover:text-foreground",
+              )}
+            >
+              <SlidersHorizontal className="size-4 shrink-0" strokeWidth={1.75} />
+              <span>{t("thread.composer.manageModels")}</span>
+            </button>
+          </div>
+        ) : null}
       </PopoverContent>
     </Popover>
   );

webui/src/components/thread/ThreadComposer.tsx

@@ -300,6 +300,7 @@ interface ThreadComposerProps {
   modelNeedsSetup?: boolean;
   fallbackModelName?: string | null;
   onModelBadgeClick?: () => void;
+  onManageModels?: () => void;
   contextUsage?: ComposerContextUsage | null;
   variant?: "thread" | "hero";
   slashCommands?: SlashCommand[];
@@ -998,6 +999,7 @@ export function ThreadComposer({
   modelNeedsSetup = false,
   fallbackModelName = null,
   onModelBadgeClick,
+  onManageModels,
   contextUsage = null,
   variant = "thread",
   slashCommands = [],
@@ -2539,6 +2541,7 @@ export function ThreadComposer({
                 modelPreset={modelPreset}
                 modelPresets={modelPresets}
                 onPresetChange={onModelPresetChange}
+                onManageModels={onManageModels}
                 onRequestComposerFocus={() => textareaRef.current?.focus()}
                 provider={modelProvider}
                 providerLabel={modelProviderLabel}

webui/src/components/thread/ThreadShell.tsx

@@ -1519,6 +1519,7 @@ export function ThreadShell({
           modelNeedsSetup={modelBadge.needsSetup}
           fallbackModelName={fallbackModelName}
           onModelBadgeClick={modelBadge.needsSetup ? onOpenModelSettings : undefined}
+          onManageModels={onOpenModelSettings}
           contextUsage={composerContextUsage}
           variant={composerVariant}
           slashCommands={availableSlashCommands}
@@ -1567,6 +1568,7 @@ export function ThreadShell({
           modelNeedsSetup={modelBadge.needsSetup}
           fallbackModelName={fallbackModelName}
           onModelBadgeClick={modelBadge.needsSetup ? onOpenModelSettings : undefined}
+          onManageModels={onOpenModelSettings}
           contextUsage={composerContextUsage}
           variant="hero"
           slashCommands={availableSlashCommands}

webui/src/i18n/locales/en/common.json

@@ -1196,6 +1196,7 @@
       "modelNotConfigured": "Model not configured",
       "configureModel": "Configure model",
       "switchModel": "Switch model for this chat",
+      "manageModels": "Manage models",
       "context": {
         "tooltip": "Context · {{tokens}}{{capacity}}",
         "meterDescription": "{{context}}. {{percent}}% used."

webui/src/i18n/locales/es/common.json

@@ -1183,6 +1183,7 @@
       "modelNotConfigured": "Modelo no configurado",
       "configureModel": "Configurar modelo",
       "switchModel": "Cambiar el modelo de este chat",
+      "manageModels": "Gestionar modelos",
       "context": {
         "tooltip": "Contexto · {{tokens}}{{capacity}}",
         "meterDescription": "{{context}}. {{percent}} % usado."

webui/src/i18n/locales/fr/common.json

@@ -1182,6 +1182,7 @@
       "modelNotConfigured": "Modèle non configuré",
       "configureModel": "Configurer le modèle",
       "switchModel": "Changer le modèle de cette conversation",
+      "manageModels": "Gérer les modèles",
       "context": {
         "tooltip": "Contexte · {{tokens}}{{capacity}}",
         "meterDescription": "{{context}}. {{percent}} % utilisé."

webui/src/i18n/locales/id/common.json

@@ -1182,6 +1182,7 @@
       "modelNotConfigured": "Model belum dikonfigurasi",
       "configureModel": "Konfigurasi model",
       "switchModel": "Ganti model untuk percakapan ini",
+      "manageModels": "Kelola model",
       "context": {
         "tooltip": "Konteks · {{tokens}}{{capacity}}",
         "meterDescription": "{{context}}. {{percent}}% digunakan."

webui/src/i18n/locales/ja/common.json

@@ -1182,6 +1182,7 @@
       "modelNotConfigured": "モデルが未設定です",
       "configureModel": "モデルを設定",
       "switchModel": "この会話で使うモデルを切り替える",
+      "manageModels": "モデルを管理",
       "context": {
         "tooltip": "コンテキスト · {{tokens}}{{capacity}}",
         "meterDescription": "{{context}}。{{percent}}% 使用中"

webui/src/i18n/locales/ko/common.json

@@ -1182,6 +1182,7 @@
       "modelNotConfigured": "모델이 설정되지 않음",
       "configureModel": "모델 설정",
       "switchModel": "이 대화에서 사용할 모델 전환",
+      "manageModels": "모델 관리",
       "context": {
         "tooltip": "컨텍스트 · {{tokens}}{{capacity}}",
         "meterDescription": "{{context}}. {{percent}}% 사용 중."

webui/src/i18n/locales/pt-BR/common.json

@@ -1196,6 +1196,7 @@
       "modelNotConfigured": "Modelo não configurado",
       "configureModel": "Configurar modelo",
       "switchModel": "Alternar o modelo desta conversa",
+      "manageModels": "Gerenciar modelos",
       "context": {
         "tooltip": "Contexto · {{tokens}}{{capacity}}",
         "meterDescription": "{{context}}. {{percent}}% usado."

webui/src/i18n/locales/vi/common.json

@@ -1182,6 +1182,7 @@
       "modelNotConfigured": "Chưa cấu hình mô hình",
       "configureModel": "Cấu hình mô hình",
       "switchModel": "Chuyển mô hình cho cuộc trò chuyện này",
+      "manageModels": "Quản lý mô hình",
       "context": {
         "tooltip": "Ngữ cảnh · {{tokens}}{{capacity}}",
         "meterDescription": "{{context}}. Đã dùng {{percent}}%."

webui/src/i18n/locales/zh-CN/common.json

@@ -1195,6 +1195,7 @@
       "modelNotConfigured": "模型未配置",
       "configureModel": "配置模型",
       "switchModel": "切换本次对话所用模型",
+      "manageModels": "管理模型预设",
       "context": {
         "tooltip": "上下文 · {{tokens}}{{capacity}}",
         "meterDescription": "{{context}}。已使用 {{percent}}%。"

webui/src/i18n/locales/zh-TW/common.json

@@ -1182,6 +1182,7 @@
       "modelNotConfigured": "尚未設定模型",
       "configureModel": "設定模型",
       "switchModel": "切換此對話使用的模型",
+      "manageModels": "管理模型預設",
       "context": {
         "tooltip": "上下文 · {{tokens}}{{capacity}}",
         "meterDescription": "{{context}}。已使用 {{percent}}%。"

webui/src/tests/thread-composer.test.tsx

@@ -322,7 +322,10 @@ const MODEL_PRESETS = [
   { name: "dspro", model: "deepseek/deepseek-v4-pro", provider: "deepseek" },
 ];
 
-function renderPresetComposer(variant: "thread" | "hero" = "thread") {
+function renderPresetComposer(
+  variant: "thread" | "hero" = "thread",
+  onManageModels?: () => void,
+) {
   const onPresetChange = vi.fn();
   render(
     <ThreadComposer
@@ -332,6 +335,7 @@ function renderPresetComposer(variant: "thread" | "hero" = "thread") {
       modelProvider="moonshot"
       modelPresets={MODEL_PRESETS}
       onModelPresetChange={onPresetChange}
+      onManageModels={onManageModels}
       placeholder={variant === "hero" ? "Ask anything..." : "Type your message..."}
       variant={variant}
     />,
@@ -610,6 +614,18 @@ describe("ThreadComposer", () => {
     expect(badge).toHaveClass("w-fit");
   });
 
+  it("opens model settings from the picker footer", async () => {
+    const onManageModels = vi.fn();
+    const { badge } = renderPresetComposer("thread", onManageModels);
+
+    fireEvent.click(badge);
+    const picker = screen.getByRole("dialog", { name: "Switch model for this chat" });
+    fireEvent.click(within(picker).getByRole("button", { name: "Manage models" }));
+
+    expect(onManageModels).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
+  });
+
   it("keeps long-press drag switching alongside the click picker", () => {
     vi.useFakeTimers();
     const { badge, onPresetChange } = renderPresetComposer();