[Feat] Add repository search to environment setup

apps/web/src/app/(onboarding)/setup/StepRepoSelection.tsx

@@ -532,6 +532,7 @@ export function StepRepoSelection({
                 selectedRepositoryIds={selectedRepositoryIds}
                 onToggleRepository={toggleRepository}
                 onCreateRepository={() => setCreateRepoDialogOpen(true)}
+                showSearch={false}
                 inputPrefix="setup-repository"
                 heightClassName="max-h-[calc(var(--effective-viewport-height)-40rem)] md:h-[18.75rem]"
               />

apps/web/src/components/settings/environments/EnvironmentRepositorySelector.tsx

@@ -1,9 +1,14 @@
 'use client';
 
-import { useMemo } from 'react';
+import { useDeferredValue, useMemo, useState } from 'react';
 
-import { Checkbox, ScrollArea } from '@/components/system';
-import { PackagePlus } from 'lucide-react';
+import {
+  Checkbox,
+  Input,
+  PackagePlus,
+  ScrollArea,
+  Search,
+} from '@/components/system';
 
 type RepositorySummary = {
   id: string;
@@ -15,27 +20,55 @@ export function EnvironmentRepositorySelector({
   selectedRepositoryIds,
   onToggleRepository,
   onCreateRepository,
+  showSearch = true,
   inputPrefix = 'environment-repository',
   heightClassName = 'max-h-[11.5rem] md:h-[18.75rem]',
 }: {
   repositories: RepositorySummary[];
   selectedRepositoryIds: string[];
   onToggleRepository: (repositoryId: string) => void;
   onCreateRepository?: () => void;
+  showSearch?: boolean;
   inputPrefix?: string;
   heightClassName?: string;
 }) {
+  const [search, setSearch] = useState('');
+  const normalizedSearch = useDeferredValue(search.trim().toLowerCase());
   const sortedRepositories = useMemo(
     () =>
       [...repositories].sort((left, right) =>
         left.fullName.localeCompare(right.fullName),
       ),
     [repositories],
   );
+  const filteredRepositories = useMemo(() => {
+    if (!normalizedSearch) {
+      return sortedRepositories;
+    }
+
+    return sortedRepositories.filter((repository) =>
+      repository.fullName.toLowerCase().includes(normalizedSearch),
+    );
+  }, [normalizedSearch, sortedRepositories]);
 
   return (
     <ScrollArea className={`overflow-auto ${heightClassName}`}>
       <div className="space-y-1">
+        {showSearch && repositories.length > 0 ? (
+          <div className="sticky top-0 z-10 bg-card pb-2">
+            <div className="relative">
+              <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                type="search"
+                aria-label="Search repositories"
+                placeholder="Search repositories…"
+                value={search}
+                onChange={(event) => setSearch(event.currentTarget.value)}
+                className="pl-9"
+              />
+            </div>
+          </div>
+        ) : null}
         {onCreateRepository ? (
           <p className="border-b border-dotted pb-1">
             <button
@@ -48,21 +81,27 @@ export function EnvironmentRepositorySelector({
             </button>
           </p>
         ) : null}
-        {sortedRepositories.map((repository) => (
-          <label
-            key={repository.id}
-            className="flex cursor-pointer items-start gap-3 rounded-md py-1 text-foreground transition-colors hover:bg-muted/30"
-            htmlFor={`${inputPrefix}-${repository.id}`}
-          >
-            <Checkbox
-              id={`${inputPrefix}-${repository.id}`}
-              checked={selectedRepositoryIds.includes(repository.id)}
-              onCheckedChange={() => onToggleRepository(repository.id)}
-              className="mt-0.5"
-            />
-            <div className="min-w-0 flex-1">{repository.fullName}</div>
-          </label>
-        ))}
+        {filteredRepositories.length === 0 && normalizedSearch ? (
+          <p className="py-6 text-center text-sm text-muted-foreground">
+            No repositories found.
+          </p>
+        ) : (
+          filteredRepositories.map((repository) => (
+            <label
+              key={repository.id}
+              className="flex cursor-pointer items-start gap-3 rounded-md py-1 text-foreground transition-colors hover:bg-muted/30"
+              htmlFor={`${inputPrefix}-${repository.id}`}
+            >
+              <Checkbox
+                id={`${inputPrefix}-${repository.id}`}
+                checked={selectedRepositoryIds.includes(repository.id)}
+                onCheckedChange={() => onToggleRepository(repository.id)}
+                className="mt-0.5"
+              />
+              <div className="min-w-0 flex-1">{repository.fullName}</div>
+            </label>
+          ))
+        )}
       </div>
     </ScrollArea>
   );

apps/web/src/components/system/primitives/icons.ts

@@ -141,6 +141,7 @@ export {
   Music2Icon,
   PanelLeftClose,
   PanelLeftOpen,
+  PackagePlus,
   PaperclipIcon,
   Pencil,
   Pin,