fix(agent): move route selector to settings

src/app/layout.tsx

@@ -104,7 +104,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
   let signedIn = false;
   let assistantEnabled = false;
   let assistantName = DEFAULT_ASSISTANT_NAME;
-  let assistantModelRoute: string | null = null;
   let assistantModel: string | null = null;
 
   const session = await auth();
@@ -119,7 +118,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         themeNavStyle: users.themeNavStyle,
         assistantEnabled: users.assistantEnabled,
         assistantName: users.assistantName,
-        assistantModelRoute: users.assistantModelRoute,
         assistantModel: users.assistantModel,
       })
       .from(users)
@@ -133,7 +131,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       navStyle = row.themeNavStyle as NavStyle;
       assistantEnabled = row.assistantEnabled;
       assistantName = row.assistantName?.trim() || DEFAULT_ASSISTANT_NAME;
-      assistantModelRoute = row.assistantModelRoute?.trim() || null;
       assistantModel = row.assistantModel?.trim() || null;
     }
     userDashboards = await db
@@ -192,7 +189,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
               configured={isLlmConfigured()}
               userId={session.user.id}
               assistantName={assistantName}
-              assistantModelRoute={assistantModelRoute}
               assistantModel={assistantModel}
             />
           ) : null}

src/app/settings/page.tsx

@@ -324,6 +324,7 @@ function AppearanceSection({
     themeNavStyle: string;
     assistantEnabled: boolean;
     assistantName: string;
+    assistantModelRoute: string | null;
     assistantSystemPrompt: string | null;
   };
 }) {
@@ -361,6 +362,7 @@ function AppearanceSection({
           <AssistantSettings
             enabled={user.assistantEnabled}
             name={user.assistantName}
+            modelRoute={user.assistantModelRoute}
             systemPrompt={user.assistantSystemPrompt}
             defaultSystemPrompt={AGENT_SYSTEM_PROMPT}
           />

src/components/assistant-settings.tsx

@@ -7,9 +7,11 @@ import {
   resetAssistantSystemPrompt,
   setAssistantEnabled,
   setAssistantName,
+  setAssistantModelRoute,
   setAssistantSystemPrompt,
 } from "@/app/settings/assistant-actions";
 import { DEFAULT_ASSISTANT_NAME, MAX_ASSISTANT_NAME_LENGTH } from "@/lib/assistant-config";
+import type { AssistantModelRoute } from "@/lib/llm/models";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
@@ -17,15 +19,29 @@ import { Switch } from "@/components/ui/switch";
 type Props = {
   enabled: boolean;
   name: string;
+  modelRoute: string | null;
   systemPrompt: string | null;
   defaultSystemPrompt: string;
 };
 
-export function AssistantSettings({ enabled, name, systemPrompt, defaultSystemPrompt }: Props) {
+function normalizeAssistantModelRoute(value: string | null): AssistantModelRoute {
+  return value === "uncensored" ? "uncensored" : "auto";
+}
+
+export function AssistantSettings({
+  enabled,
+  name,
+  modelRoute,
+  systemPrompt,
+  defaultSystemPrompt,
+}: Props) {
   const [isPending, startTransition] = useTransition();
   const router = useRouter();
 
   const effectivePrompt = systemPrompt ?? defaultSystemPrompt;
+  const [selectedRoute, setSelectedRoute] = useState<AssistantModelRoute>(() =>
+    normalizeAssistantModelRoute(modelRoute),
+  );
   const [savedName, setSavedName] = useState(name);
   const [draftName, setDraftName] = useState(name);
   const [savedPrompt, setSavedPrompt] = useState(systemPrompt);
@@ -45,6 +61,16 @@ export function AssistantSettings({ enabled, name, systemPrompt, defaultSystemPr
     });
   }
 
+  function changeModelRoute(nextRoute: string) {
+    const route = normalizeAssistantModelRoute(nextRoute);
+    setSelectedRoute(route);
+
+    startTransition(async () => {
+      await setAssistantModelRoute(route);
+      router.refresh();
+    });
+  }
+
   function saveName() {
     const next = draftName.trim();
     if (!next) return;
@@ -105,6 +131,29 @@ export function AssistantSettings({ enabled, name, systemPrompt, defaultSystemPr
         />
       </label>
 
+      <div className="flex flex-col gap-2">
+        <div className="min-w-0">
+          <label htmlFor="assistant-model-route" className="text-sm font-medium">
+            Model route
+          </label>
+          <p className="muted text-[12px] mt-0.5">
+            Choose the default router family for your assistant. Individual models can still be
+            picked from the chat panel.
+          </p>
+        </div>
+        <select
+          id="assistant-model-route"
+          aria-label="Assistant model route"
+          value={selectedRoute}
+          disabled={isPending}
+          onChange={(event) => changeModelRoute(event.target.value)}
+          className="input h-10"
+        >
+          <option value="auto">Auto</option>
+          <option value="uncensored">Uncensored</option>
+        </select>
+      </div>
+
       <div className="flex flex-col gap-2">
         <div className="flex items-end justify-between gap-3">
           <div className="min-w-0 flex-1">

src/modules/agent/components/assistant-bubble.tsx

@@ -8,17 +8,10 @@ type Props = {
   configured: boolean;
   userId: string;
   assistantName: string;
-  assistantModelRoute: string | null;
   assistantModel: string | null;
 };
 
-export function AssistantBubble({
+export function AssistantBubble({ configured, userId, assistantName, assistantModel }: Props) {
-  configured,
-  userId,
-  assistantName,
-  assistantModelRoute,
-  assistantModel,
-}: Props) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -49,7 +42,6 @@ export function AssistantBubble({
             configured={configured}
             userId={userId}
             assistantName={assistantName}
-            assistantModelRoute={assistantModelRoute}
             assistantModel={assistantModel}
           />
         </div>

src/modules/agent/components/assistant-panel.tsx

@@ -2,10 +2,9 @@
 
 import { useCallback, useEffect, useRef, useState, useTransition } from "react";
 import { ChevronDown, ImagePlus, Loader2, Mic, RefreshCw, Send, Square } from "lucide-react";
-import { setAssistantModel, setAssistantModelRoute } from "@/app/settings/assistant-actions";
+import { setAssistantModel } from "@/app/settings/assistant-actions";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import type { AssistantModelRoute } from "@/lib/llm/models";
 import { consumeAgentChatStream } from "../assistant-chat-stream";
 import {
   clearAssistantChat,
@@ -20,7 +19,6 @@ type Props = {
   configured: boolean;
   userId: string;
   assistantName: string;
-  assistantModelRoute: string | null;
   assistantModel: string | null;
 };
 
@@ -37,7 +35,6 @@ type ModelsResponse = {
   models: LlmModelOption[];
   selectedModel: string;
   fallbackModel: string;
-  route: AssistantModelRoute;
   degraded: boolean;
 };
 
@@ -53,17 +50,7 @@ async function uploadAssistantImage(file: File): Promise<string> {
   return payload.url;
 }
 
-function normalizeAssistantModelRoute(value: string | null): AssistantModelRoute {
+export function AssistantPanel({ configured, userId, assistantName, assistantModel }: Props) {
-  return value === "uncensored" ? "uncensored" : "auto";
-}
-
-export function AssistantPanel({
-  configured,
-  userId,
-  assistantName,
-  assistantModelRoute,
-  assistantModel,
-}: Props) {
   const [messages, setMessages] = useState<AssistantChatMessage[]>(() => loadAssistantChat(userId));
   const [input, setInput] = useState("");
   const [pendingImage, setPendingImage] = useState<PendingImage | null>(null);
@@ -72,9 +59,6 @@ export function AssistantPanel({
   const [isPending, setIsPending] = useState(false);
   const [activityLabel, setActivityLabel] = useState<string | null>(null);
   const [modelOptions, setModelOptions] = useState<LlmModelOption[]>([]);
-  const [selectedRoute, setSelectedRoute] = useState<AssistantModelRoute>(() =>
-    normalizeAssistantModelRoute(assistantModelRoute),
-  );
   const [selectedModel, setSelectedModel] = useState(assistantModel ?? "");
   const [fallbackModel, setFallbackModel] = useState("");
   const [modelsDegraded, setModelsDegraded] = useState(false);
@@ -103,40 +87,35 @@ export function AssistantPanel({
     };
   }, []);
 
-  const loadModels = useCallback(
+  const loadModels = useCallback(async (options?: { refresh?: boolean; signal?: AbortSignal }) => {
-    async (options?: { refresh?: boolean; route?: AssistantModelRoute; signal?: AbortSignal }) => {
+    if (options?.signal?.aborted) return;
+
+    setModelsLoading(true);
+    try {
+      const params = new URLSearchParams();
+      if (options?.refresh) params.set("refresh", "1");
+      const query = params.size > 0 ? `?${params.toString()}` : "";
+
+      const response = await fetch(`/api/agent/models${query}`, {
+        cache: "no-store",
+        signal: options?.signal,
+      });
+      if (!response.ok) throw new Error("Model discovery unavailable");
+      const payload = (await response.json()) as ModelsResponse;
       if (options?.signal?.aborted) return;
-
+      setModelOptions(payload.models);
-      setModelsLoading(true);
+      setSelectedModel(payload.selectedModel);
-      try {
+      setFallbackModel(payload.fallbackModel);
-        const params = new URLSearchParams();
+      setModelsDegraded(payload.degraded);
-        if (options?.refresh) params.set("refresh", "1");
+      setError(null);
-        if (options?.route) params.set("route", options.route);
+    } catch (err) {
-        const query = params.size > 0 ? `?${params.toString()}` : "";
+      if (err instanceof Error && err.name === "AbortError") return;
-
+      setModelsDegraded(true);
-        const response = await fetch(`/api/agent/models${query}`, {
+      setError("Model discovery unavailable");
-          cache: "no-store",
+    } finally {
-          signal: options?.signal,
+      if (!options?.signal?.aborted) setModelsLoading(false);
-        });
+    }
-        if (!response.ok) throw new Error("Model discovery unavailable");
+  }, []);
-        const payload = (await response.json()) as ModelsResponse;
-        if (options?.signal?.aborted) return;
-        setModelOptions(payload.models);
-        setSelectedRoute(payload.route);
-        setSelectedModel(payload.selectedModel);
-        setFallbackModel(payload.fallbackModel);
-        setModelsDegraded(payload.degraded);
-        setError(null);
-      } catch (err) {
-        if (err instanceof Error && err.name === "AbortError") return;
-        setModelsDegraded(true);
-        setError("Model discovery unavailable");
-      } finally {
-        if (!options?.signal?.aborted) setModelsLoading(false);
-      }
-    },
-    [],
-  );
 
   useEffect(() => {
     const controller = new AbortController();
@@ -200,26 +179,6 @@ export function AssistantPanel({
     });
   }
 
-  function changeModelRoute(nextRoute: string) {
-    const route = normalizeAssistantModelRoute(nextRoute);
-
-    setSelectedRoute(route);
-    setSelectedModel(route);
-    setFallbackModel(route);
-    setModelOptions([]);
-    setModelsDegraded(false);
-    setError(null);
-
-    startTransition(async () => {
-      try {
-        await setAssistantModelRoute(route);
-        await loadModels({ route, refresh: true });
-      } catch (err) {
-        setError(err instanceof Error ? err.message : "Could not save assistant route");
-      }
-    });
-  }
-
   async function sendMessage() {
     const text = input.trim();
     const hasImage = pendingImage !== null;
@@ -306,22 +265,6 @@ export function AssistantPanel({
           ) : null}
         </div>
         <div className="flex shrink-0 items-center gap-2">
-          <div className="relative max-w-32">
-            <select
-              aria-label="Assistant model route"
-              value={selectedRoute}
-              onChange={(event) => changeModelRoute(event.target.value)}
-              disabled={modelsLoading || savingModel || isPending}
-              className="h-9 w-full max-w-32 appearance-none truncate rounded-[min(var(--radius-md),10px)] border border-input bg-[var(--card)] py-0 pr-8 pl-3 text-[13px] leading-9 text-[var(--ink)] outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              <option value="auto">Auto</option>
-              <option value="uncensored">Uncensored</option>
-            </select>
-            <ChevronDown
-              className="pointer-events-none absolute top-1/2 right-2 size-4 -translate-y-1/2 text-muted-foreground"
-              aria-hidden="true"
-            />
-          </div>
           {modelOptions.length > 0 ? (
             <div className="relative max-w-36">
               <select
@@ -349,7 +292,7 @@ export function AssistantPanel({
             variant="outline"
             aria-label="Refresh assistant models"
             disabled={modelsLoading || savingModel || isPending}
-            onClick={() => void loadModels({ route: selectedRoute, refresh: true })}
+            onClick={() => void loadModels({ refresh: true })}
           >
             {modelsLoading ? (
               <Loader2 className="size-4 animate-spin" />

tests/e2e/assistant.spec.ts

@@ -22,10 +22,6 @@ test("assistant chat smoke after opt-in", async ({ page }) => {
     await assistantSwitch.click();
   }
   await expect(assistantSwitch).toBeChecked();
-
-  await page.goto("/");
-  await page.getByRole("button", { name: "Open assistant" }).click();
-  await expect(page.getByRole("dialog", { name: "Assistant" })).toBeVisible();
   const routeSelector = page.getByRole("combobox", { name: "Assistant model route" });
   await expect(routeSelector).toBeVisible();
   await routeSelector.selectOption("auto");
@@ -34,6 +30,11 @@ test("assistant chat smoke after opt-in", async ({ page }) => {
   await routeSelector.selectOption("uncensored");
   await expect(routeSelector).toHaveValue("uncensored");
   await expect(routeSelector).toBeEnabled();
+
+  await page.goto("/");
+  await page.getByRole("button", { name: "Open assistant" }).click();
+  await expect(page.getByRole("dialog", { name: "Assistant" })).toBeVisible();
+  await expect(page.getByRole("combobox", { name: "Assistant model route" })).toHaveCount(0);
   const modelSelector = page.getByRole("combobox", { name: "Assistant model", exact: true });
   await expect(modelSelector).toBeVisible();
   const refreshModels = page.getByRole("button", { name: "Refresh assistant models" });