From 716bca0fcba8f2026c814f668bf873cf61a0ad16 Mon Sep 17 00:00:00 2001
From: ginnoir <ginnoir@users.noreply.github.com>
Date: Wed, 8 Jul 2026 18:52:19 -0500
Subject: [PATCH] fix(agent): use native model selector

---
 .../agent/components/assistant-panel.tsx      | 48 ++++++++-----------
 tests/e2e/assistant.spec.ts                   |  4 +-
 2 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/src/modules/agent/components/assistant-panel.tsx b/src/modules/agent/components/assistant-panel.tsx
index 1c70da1..45d17e6 100644
--- a/src/modules/agent/components/assistant-panel.tsx
+++ b/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
-              items={modelOptions.map((model) => ({ value: model.id, label: model.label }))}
-              value={selectedModel}
-              onValueChange={changeModel}
-              disabled={modelsLoading || savingModel || isPending}
-            >
-              <SelectTrigger size="sm" className="max-w-36" aria-label="Assistant model">
-                <SelectValue>{selectedModel || "Model"}</SelectValue>
-              </SelectTrigger>
-              <SelectContent align="end">
-                <SelectGroup>
-                  {modelOptions.map((model) => (
-                    <SelectItem key={model.id} value={model.id}>
-                      {model.label}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
+            <div className="relative max-w-36">
+              <select
+                aria-label="Assistant model"
+                value={selectedModel}
+                onChange={(event) => changeModel(event.target.value)}
+                disabled={modelsLoading || savingModel || isPending}
+                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"
+              >
+                {modelOptions.map((model) => (
+                  <option key={model.id} value={model.id}>
+                    {model.label}
+                  </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>
           ) : null}
           {messages.length > 0 ? (
             <button
diff --git a/tests/e2e/assistant.spec.ts b/tests/e2e/assistant.spec.ts
index 677cb9e..b495409 100644
--- a/tests/e2e/assistant.spec.ts
+++ b/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();