fix(agent): use native model selector

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

@@ -1,18 +1,10 @@
 "use client";
 
 import { useEffect, useRef, useState, useTransition } from "react";
-import { ImagePlus, Loader2, Mic, Send, Square } from "lucide-react";
+import { ChevronDown, ImagePlus, Loader2, Mic, Send, Square } from "lucide-react";
 import { setAssistantModel } from "@/app/settings/assistant-actions";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { consumeAgentChatStream } from "../assistant-chat-stream";
 import {
   clearAssistantChat,
@@ -259,25 +251,25 @@ export function AssistantPanel({ configured, userId, assistantName, assistantMod
         </div>
         <div className="flex shrink-0 items-center gap-2">
           {modelOptions.length > 0 ? (
-            <Select
+            <div className="relative max-w-36">
-              items={modelOptions.map((model) => ({ value: model.id, label: model.label }))}
+              <select
-              value={selectedModel}
+                aria-label="Assistant model"
-              onValueChange={changeModel}
+                value={selectedModel}
-              disabled={modelsLoading || savingModel || isPending}
+                onChange={(event) => changeModel(event.target.value)}
-            >
+                disabled={modelsLoading || savingModel || isPending}
-              <SelectTrigger size="sm" className="max-w-36" aria-label="Assistant model">
+                className="h-7 w-full max-w-36 appearance-none truncate rounded-[min(var(--radius-md),10px)] border border-input bg-transparent py-1 pr-7 pl-2.5 text-sm outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
-                <SelectValue>{selectedModel || "Model"}</SelectValue>
+              >
-              </SelectTrigger>
+                {modelOptions.map((model) => (
-              <SelectContent align="end">
+                  <option key={model.id} value={model.id}>
-                <SelectGroup>
+                    {model.label}
-                  {modelOptions.map((model) => (
+                  </option>
-                    <SelectItem key={model.id} value={model.id}>
+                ))}
-                      {model.label}
+              </select>
-                    </SelectItem>
+              <ChevronDown
-                  ))}
+                className="pointer-events-none absolute top-1/2 right-2 size-4 -translate-y-1/2 text-muted-foreground"
-                </SelectGroup>
+                aria-hidden="true"
-              </SelectContent>
+              />
-            </Select>
+            </div>
           ) : null}
           {messages.length > 0 ? (
             <button

tests/e2e/assistant.spec.ts

@@ -26,7 +26,9 @@ test("assistant chat smoke after opt-in", async ({ page }) => {
   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" })).toBeVisible();
+  const modelSelector = page.getByRole("combobox", { name: "Assistant model" });
+  await expect(modelSelector).toBeVisible();
+  await expect.poll(() => modelSelector.evaluate((node) => node.tagName)).toBe("SELECT");
 
   await page.getByLabel("Message for Assistant").fill("hello assistant");
   await page.getByRole("button", { name: "Send" }).click();