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}