feat(agent): let users choose model route

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

@@ -2,9 +2,10 @@
 
 import { useCallback, useEffect, useRef, useState, useTransition } from "react";
 import { ChevronDown, ImagePlus, Loader2, Mic, RefreshCw, Send, Square } from "lucide-react";
-import { setAssistantModel } from "@/app/settings/assistant-actions";
+import { setAssistantModel, setAssistantModelRoute } 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,
@@ -19,6 +20,7 @@ type Props = {
   configured: boolean;
   userId: string;
   assistantName: string;
+  assistantModelRoute: string | null;
   assistantModel: string | null;
 };
 
@@ -35,6 +37,7 @@ type ModelsResponse = {
   models: LlmModelOption[];
   selectedModel: string;
   fallbackModel: string;
+  route: AssistantModelRoute;
   degraded: boolean;
 };
 
@@ -50,7 +53,17 @@ async function uploadAssistantImage(file: File): Promise<string> {
   return payload.url;
 }
 
-export function AssistantPanel({ configured, userId, assistantName, assistantModel }: Props) {
+function normalizeAssistantModelRoute(value: string | null): AssistantModelRoute {
+  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);
@@ -59,6 +72,9 @@ export function AssistantPanel({ configured, userId, assistantName, assistantMod
   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);
@@ -87,31 +103,40 @@ export function AssistantPanel({ configured, userId, assistantName, assistantMod
     };
   }, []);
 
-  const loadModels = useCallback(async (options?: { refresh?: boolean; signal?: AbortSignal }) => {
-    if (options?.signal?.aborted) return;
-
-    setModelsLoading(true);
-    try {
-      const response = await fetch(`/api/agent/models${options?.refresh ? "?refresh=1" : ""}`, {
-        cache: "no-store",
-        signal: options?.signal,
-      });
-      if (!response.ok) throw new Error("Model discovery unavailable");
-      const payload = (await response.json()) as ModelsResponse;
+  const loadModels = useCallback(
+    async (options?: { refresh?: boolean; route?: AssistantModelRoute; signal?: AbortSignal }) => {
       if (options?.signal?.aborted) return;
-      setModelOptions(payload.models);
-      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);
-    }
-  }, []);
+
+      setModelsLoading(true);
+      try {
+        const params = new URLSearchParams();
+        if (options?.refresh) params.set("refresh", "1");
+        if (options?.route) params.set("route", options.route);
+        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);
+        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();
@@ -175,6 +200,26 @@ export function AssistantPanel({ configured, userId, assistantName, assistantMod
     });
   }
 
+  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;
@@ -242,6 +287,7 @@ export function AssistantPanel({ configured, userId, assistantName, assistantMod
   const inputDisabled = isPending || voiceState === "transcribing" || uploadingImage;
   const canSend =
     !isPending &&
+    !savingModel &&
     voiceState === "idle" &&
     !uploadingImage &&
     (input.trim().length > 0 || pendingImage !== null);
@@ -260,6 +306,22 @@ export function AssistantPanel({ configured, userId, assistantName, assistantMod
           ) : 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
@@ -287,7 +349,7 @@ export function AssistantPanel({ configured, userId, assistantName, assistantMod
             variant="outline"
             aria-label="Refresh assistant models"
             disabled={modelsLoading || savingModel || isPending}
-            onClick={() => void loadModels({ refresh: true })}
+            onClick={() => void loadModels({ route: selectedRoute, refresh: true })}
           >
             {modelsLoading ? (
               <Loader2 className="size-4 animate-spin" />