diff --git a/ui/src/components/AgentMultiSelect.test.tsx b/ui/src/components/AgentMultiSelect.test.tsx
index 26004b70af..82daf82509 100644
--- a/ui/src/components/AgentMultiSelect.test.tsx
+++ b/ui/src/components/AgentMultiSelect.test.tsx
@@ -3,7 +3,7 @@
 import { flushSync } from "react-dom";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { AgentMultiSelect } from "./AgentMultiSelect";
+import { AgentMultiSelect, AgentSelect } from "./AgentMultiSelect";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
@@ -92,6 +92,42 @@ describe("AgentMultiSelect", () => {
     expect(onChange.mock.calls[0]?.[0]).toEqual(new Set(["agent-17"]));
   });
 
+  it("filters and selects a single agent", async () => {
+    const onChange = vi.fn();
+    const agents = [
+      { id: "agent-1", name: "Alpha", title: "Engineer" },
+      { id: "agent-2", name: "Bravo", title: "Researcher" },
+    ];
+
+    root = createRoot(container);
+    act(() => {
+      root?.render(<AgentSelect agents={agents} value="" onChange={onChange} />);
+    });
+
+    act(() => {
+      container.querySelector("button")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    await flush();
+
+    const filter = document.body.querySelector<HTMLInputElement>('input[placeholder="Filter agents"]');
+    expect(filter).not.toBeNull();
+    setInputValue(filter!, "research");
+    await flush();
+
+    expect(document.body.textContent).toContain("Bravo");
+    expect(document.body.textContent).not.toContain("Alpha");
+
+    act(() => {
+      document.body
+        .querySelector('[aria-label="Select Bravo"]')
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    await flush();
+
+    expect(onChange).toHaveBeenCalledWith("agent-2");
+    expect(document.body.querySelector('input[placeholder="Filter agents"]')).toBeNull();
+  });
+
   it("previews selected agents and stages changes until save", async () => {
     const onSave = vi.fn();
     const agents = Array.from({ length: 6 }, (_, index) => ({
diff --git a/ui/src/components/AgentMultiSelect.tsx b/ui/src/components/AgentMultiSelect.tsx
index b1a693f900..ad0579895c 100644
--- a/ui/src/components/AgentMultiSelect.tsx
+++ b/ui/src/components/AgentMultiSelect.tsx
@@ -15,6 +15,102 @@ export interface AgentMultiSelectOption {
   icon?: string | null;
 }
 
+export function AgentSelect({
+  agents,
+  value,
+  onChange,
+  placeholder = "Select agent…",
+  emptyMessage = "No agents yet.",
+  disabled = false,
+  triggerClassName,
+  id,
+}: {
+  agents: AgentMultiSelectOption[];
+  value: string;
+  onChange: (agentId: string) => void;
+  placeholder?: string;
+  emptyMessage?: string;
+  disabled?: boolean;
+  triggerClassName?: string;
+  id?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState("");
+  const selectedAgent = agents.find((agent) => agent.id === value);
+  const normalizedFilter = filter.trim().toLowerCase();
+  const filteredAgents = useMemo(
+    () =>
+      agents
+        .filter((agent) => `${agent.name} ${agent.title ?? ""}`.toLowerCase().includes(normalizedFilter))
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [agents, normalizedFilter],
+  );
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (!nextOpen) setFilter("");
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          size="sm"
+          className={cn("w-full justify-between", triggerClassName)}
+          disabled={disabled}
+        >
+          <span className={cn("min-w-0 truncate", !selectedAgent && "text-muted-foreground")}>
+            {selectedAgent?.name ?? placeholder}
+          </span>
+          <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+        <div className="border-b border-border p-3">
+          <Input
+            value={filter}
+            onChange={(event) => setFilter(event.target.value)}
+            placeholder="Filter agents"
+            className="h-8"
+            autoFocus
+          />
+        </div>
+        {agents.length === 0 ? (
+          <div className="px-3 py-4 text-sm text-muted-foreground">{emptyMessage}</div>
+        ) : (
+          <div className="max-h-60 overflow-y-auto py-1">
+            {filteredAgents.map((agent) => (
+              <button
+                key={agent.id}
+                type="button"
+                className="flex w-full items-start gap-2 px-3 py-2 text-left hover:bg-accent/30"
+                aria-label={`Select ${agent.name}`}
+                onClick={() => {
+                  onChange(agent.id);
+                  setOpen(false);
+                }}
+              >
+                <AgentIcon icon={agent.icon ?? null} className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+                <span className="flex min-w-0 flex-col">
+                  <span className="truncate text-sm font-medium text-foreground">{agent.name}</span>
+                  {agent.title ? <span className="truncate text-xs text-muted-foreground">{agent.title}</span> : null}
+                </span>
+              </button>
+            ))}
+            {filteredAgents.length === 0 ? (
+              <div className="px-3 py-4 text-sm text-muted-foreground">No matches.</div>
+            ) : null}
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 export function AgentMultiSelect({
   agents,
   selectedAgentIds,
diff --git a/ui/src/pages/Secrets.render.test.tsx b/ui/src/pages/Secrets.render.test.tsx
index c4e3aef013..5ec49b8136 100644
--- a/ui/src/pages/Secrets.render.test.tsx
+++ b/ui/src/pages/Secrets.render.test.tsx
@@ -1357,14 +1357,21 @@ describe("Secrets page layout", () => {
     expect(document.body.textContent).toContain("Agent access");
     expect(document.body.textContent).toContain("Reviewer");
 
-    const agentSelect = document.getElementById("agent-access-agent") as HTMLSelectElement;
+    const agentSelect = document.getElementById("agent-access-agent") as HTMLButtonElement;
     const envKeyInput = document.getElementById("agent-access-env-key") as HTMLInputElement;
     expect(envKeyInput.value).toBe("OPENAI_API_KEY");
-    // Agents that already have access are not offered again.
-    expect(Array.from(agentSelect.options).map((option) => option.textContent)).not.toContain("Reviewer");
 
     await act(async () => {
-      setSelectValue(agentSelect, "agent-coder");
+      agentSelect.click();
+    });
+    await flushReact();
+
+    // Agents that already have access are not offered again.
+    expect(document.body.textContent).toContain("CodexCoder");
+    expect(document.body.querySelector('[aria-label="Select Reviewer"]')).toBeNull();
+
+    await act(async () => {
+      (document.body.querySelector('[aria-label="Select CodexCoder"]') as HTMLButtonElement | null)?.click();
     });
     await flushReact();
 
diff --git a/ui/src/pages/Secrets.tsx b/ui/src/pages/Secrets.tsx
index 4cf2153da4..0acc27e2b5 100644
--- a/ui/src/pages/Secrets.tsx
+++ b/ui/src/pages/Secrets.tsx
@@ -100,6 +100,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { cn } from "../lib/utils";
 import { copyTextToClipboard } from "../lib/clipboard";
 import { PageTabBar } from "../components/PageTabBar";
+import { AgentSelect } from "../components/AgentMultiSelect";
 import { ImportFromVaultDialog } from "./secrets/ImportFromVaultDialog";
 import { MyUserSecretsTab } from "./secrets/MyUserSecretsTab";
 import { SecretPathName } from "./secrets/SecretPathName";
@@ -4398,19 +4399,14 @@ function AgentAccessSection({
               >
                 Agent
               </label>
-              <select
+              <AgentSelect
                 id="agent-access-agent"
-                className="h-8 w-full rounded-md border border-border bg-background px-2 text-xs outline-none"
+                agents={grantableAgents}
                 value={selectedAgentId}
-                onChange={(event) => setSelectedAgentId(event.target.value)}
-              >
-                <option value="">Select agent…</option>
-                {grantableAgents.map((agent) => (
-                  <option key={agent.id} value={agent.id}>
-                    {agent.name}
-                  </option>
-                ))}
-              </select>
+                onChange={setSelectedAgentId}
+                triggerClassName="h-8 text-xs"
+                emptyMessage="No agents available."
+              />
             </div>
             <div className="min-w-0 flex-1">
               <label