feat(ui): improve scheduled task controls (#378)

## Summary
- add client-side search to the scheduled tasks agent picker
- close and reset the picker on selection, outside click, or Escape
- add a visible label to the prompt field in the edit schedule modal

## Test plan
- [x] Run `npm run typecheck`
- [x] Lint the updated schedule components
- [x] Run `npm run test:run -- hooks/use-agents.test.tsx`
- [x] Verify the searchable picker and prompt label locally

Made with [Cursor](https://cursor.com)

<!-- greptile_comment -->

<h3>Greptile Summary</h3>

This PR improves the scheduled-tasks UI in two ways: it replaces the
Radix `Select` with a custom searchable dropdown for the scope picker,
and it adds an explicit "Prompt" label to the edit-schedule textarea.

- **Custom agent picker** — adds client-side filtering, Escape /
outside-click dismissal, and focus-return to the trigger; removes the
Radix `Select` dependency from this component.
- **Prompt label** — wraps the textarea in a `<label>` element with a
visible "Prompt" span, matching the existing `ScheduleNameInput` pattern
and improving accessibility.
- **Known gap** — the trigger button's `onClick` handler does not call
`setQuery('')` when closing, so a stale search term persists if the user
toggles the dropdown closed via the button rather than via Escape,
outside-click, or item selection.

<details><summary><h3>Confidence Score: 4/5</h3></summary>

Safe to merge after fixing the stale-query issue on trigger-button
close.

The custom dropdown correctly resets the search query on every close
path (Escape, outside-click, item selection) except one: clicking the
trigger button a second time only toggles isOpen without calling
setQuery. A user who closes via the button and reopens sees a filtered
list based on their previous search term with no explanation. The fix is
a one-liner. Everything else is correct.

**Files Needing Attention:**
agentex-ui/components/scheduled-tasks/scheduled-tasks-page.tsx — the
trigger button onClick handler needs to clear the search query when
closing.
</details>

<details><summary><h3>Important Files Changed</h3></summary>

| Filename | Overview |
|----------|----------|
| agentex-ui/components/scheduled-tasks/scheduled-tasks-page.tsx |
Replaces Radix Select with a custom searchable dropdown; correctly
handles outside-click, Escape, and item-selection close paths, but omits
query reset when the trigger button toggles the dropdown closed. |
| agentex-ui/components/scheduled-tasks/schedule-modals.tsx | Wraps the
prompt textarea in a labeled `<label>` element, matching the existing
`ScheduleNameInput` pattern; straightforward and safe change. |

</details>

<details><summary><h3>Flowchart</h3></summary>

```mermaid
%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A([User clicks trigger button]) --> B{isOpen?}
    B -- false --> C[setIsOpen true\nautoFocus search input]
    B -- true --> D[setIsOpen false\n query NOT cleared]
    C --> E[Dropdown renders]
    E --> F{User action}
    F -- Types in search --> G[filteredAgents updates]
    F -- Selects item --> H[selectAgent or selectScope\nsetIsOpen false\nsetQuery empty\ntriggerRef.focus]
    F -- Presses Escape --> I[closeOnEscape handler\nsetIsOpen false\nsetQuery empty\ntriggerRef.focus]
    F -- Clicks outside --> J[closeOnOutsideClick handler\nsetIsOpen false\nsetQuery empty]
    F -- Clicks trigger again --> D
    D --> K([Dropdown closes, stale query remains])
```
</details>

<sub>Reviews (2): Last reviewed commit: ["fix(ui): handle schedule
picker loading
..."](14bf201)
| [Re-trigger
Greptile](https://app.greptile.com/api/retrigger?id=47575437)</sub>

<!-- /greptile_comment -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: jromualdez-scale

agentex-ui/components/scheduled-tasks/schedule-modals.tsx

@@ -137,11 +137,14 @@ export function EditScheduleModal({
     <>
       <BasicModal title="Edit scheduled task" onClose={onClose}>
         <ScheduleNameInput name={name} setName={setName} />
-        <textarea
-          value={prompt}
-          onChange={event => setPrompt(event.target.value)}
-          className="border-input bg-background min-h-24 rounded-md border p-3 text-sm"
-        />
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="font-medium">Prompt</span>
+          <textarea
+            value={prompt}
+            onChange={event => setPrompt(event.target.value)}
+            className="border-input bg-background min-h-24 rounded-md border p-3 text-sm"
+          />
+        </label>
         <CadencePicker
           cadence={cadence}
           onChange={setCadence}

agentex-ui/components/scheduled-tasks/scheduled-tasks-page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { Bot, CalendarClock, Loader2 } from 'lucide-react';
+import { Bot, CalendarClock, ChevronDown, Loader2, Search } from 'lucide-react';
 
 import { useAgentexClient } from '@/components/providers';
 import { AllSchedulesList } from '@/components/scheduled-tasks/all-schedules-list';
@@ -17,13 +17,6 @@ import {
   sortScheduleItems,
 } from '@/components/scheduled-tasks/schedule-helpers';
 import { UpcomingScheduleList } from '@/components/scheduled-tasks/upcoming-schedule-list';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { useAgentByName } from '@/hooks/use-agent-by-name';
 import {
   SCHEDULE_LIST_LIMIT,
@@ -217,43 +210,135 @@ function ScheduleScopeSelector({
   onChange: (scope: ScheduleScope) => void;
   onSelectAgent: (agentName: string) => void;
 }) {
-  const value =
-    scope === ScheduleScope.ALL ? ScheduleScope.ALL : selectedAgent?.name;
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const filteredAgents = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) return agents;
+    return agents.filter(agent =>
+      agent.name.toLowerCase().includes(normalizedQuery)
+    );
+  }, [agents, query]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const closeOnOutsideClick = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setIsOpen(false);
+        setQuery('');
+      }
+    };
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+        setQuery('');
+        triggerRef.current?.focus();
+      }
+    };
+
+    document.addEventListener('mousedown', closeOnOutsideClick);
+    document.addEventListener('keydown', closeOnEscape);
+    return () => {
+      document.removeEventListener('mousedown', closeOnOutsideClick);
+      document.removeEventListener('keydown', closeOnEscape);
+    };
+  }, [isOpen]);
+
+  const selectScope = (nextScope: ScheduleScope) => {
+    onChange(nextScope);
+    setIsOpen(false);
+    setQuery('');
+    triggerRef.current?.focus();
+  };
+
+  const selectAgent = (agentName: string) => {
+    onSelectAgent(agentName);
+    setIsOpen(false);
+    setQuery('');
+    triggerRef.current?.focus();
+  };
 
   return (
-    <Select
-      {...(value ? { value } : {})}
-      onValueChange={nextValue => {
-        if (nextValue === ScheduleScope.ALL) {
-          onChange(ScheduleScope.ALL);
-          return;
-        }
-        onSelectAgent(nextValue);
-      }}
-    >
-      <SelectTrigger
-        className="max-w-80 min-w-64"
+    <div ref={containerRef} className="relative max-w-80 min-w-64">
+      <button
+        ref={triggerRef}
+        type="button"
+        className="border-input focus-visible:border-primary-foreground focus-visible:ring-primary-foreground/50 flex h-9 w-full items-center justify-between gap-2 rounded-full border bg-transparent px-3 py-2 text-sm shadow-xs outline-none focus-visible:ring-[3px]"
         aria-label="Schedule agent scope"
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        onClick={() => setIsOpen(current => !current)}
       >
-        <SelectValue placeholder="Select an agent" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value={ScheduleScope.ALL}>
-          <span className="flex items-center gap-2">
-            <CalendarClock className="size-4" />
-            All agents
+        <span className="flex min-w-0 items-center gap-2">
+          {scope === ScheduleScope.ALL ? (
+            <CalendarClock className="size-4 shrink-0" />
+          ) : (
+            <Bot className="size-4 shrink-0" />
+          )}
+          <span className="truncate">
+            {scope === ScheduleScope.ALL
+              ? 'All agents'
+              : (selectedAgent?.name ?? 'Select an agent')}
           </span>
-        </SelectItem>
-        {agents.map(agent => (
-          <SelectItem key={agent.id} value={agent.name}>
-            <span className="flex items-center gap-2">
-              <Bot className="size-4" />
-              {agent.name}
-            </span>
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
+        </span>
+        <ChevronDown className="text-muted-foreground size-4 shrink-0" />
+      </button>
+      {isOpen && (
+        <div className="bg-popover text-popover-foreground absolute right-0 z-50 mt-1 w-full min-w-72 rounded-md border p-1 shadow-md">
+          <div className="relative p-1">
+            <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2" />
+            <input
+              autoFocus
+              value={query}
+              onChange={event => setQuery(event.target.value)}
+              placeholder="Search agents"
+              aria-label="Search agents"
+              className="border-input bg-background focus-visible:border-primary-foreground focus-visible:ring-primary-foreground/50 h-9 w-full rounded-md border pr-3 pl-9 text-sm outline-none focus-visible:ring-[3px]"
+            />
+          </div>
+          <div
+            className="max-h-64 overflow-y-auto p-1"
+            role="listbox"
+            aria-label="Schedule agent scope"
+          >
+            <button
+              type="button"
+              role="option"
+              aria-selected={scope === ScheduleScope.ALL}
+              onClick={() => selectScope(ScheduleScope.ALL)}
+              className="hover:bg-muted focus:bg-muted flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none"
+            >
+              <CalendarClock className="size-4" />
+              All agents
+            </button>
+            {filteredAgents.map(agent => (
+              <button
+                key={agent.id}
+                type="button"
+                role="option"
+                aria-selected={
+                  scope === ScheduleScope.CURRENT &&
+                  selectedAgent?.id === agent.id
+                }
+                onClick={() => selectAgent(agent.name)}
+                className="hover:bg-muted focus:bg-muted flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-none"
+              >
+                <Bot className="size-4" />
+                <span className="truncate">{agent.name}</span>
+              </button>
+            ))}
+            {query.trim() && filteredAgents.length === 0 && (
+              <p className="text-muted-foreground px-2 py-3 text-center text-sm">
+                No agents found
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
   );
 }