feat: implement autocomplete component and enhance server mock functionality

- Introduced a new Autocomplete component for improved user experience in selecting options across various UI components.
- Refactored BranchAutocomplete and CategoryAutocomplete to utilize the new Autocomplete component, streamlining code and enhancing maintainability.
- Updated Playwright configuration to support mock agent functionality during CI/CD, allowing for simulated API interactions without real calls.
- Added comprehensive end-to-end tests for feature lifecycle, ensuring robust validation of the complete feature management process.
- Enhanced auto-mode service to support mock responses, improving testing efficiency and reliability.

apps/app/src/components/ui/branch-autocomplete.tsx

@@ -1,23 +1,8 @@
 "use client";
 
 import * as React from "react";
-import { Check, ChevronsUpDown, GitBranch } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { GitBranch } from "lucide-react";
+import { Autocomplete, AutocompleteOption } from "@/components/ui/autocomplete";
 
 interface BranchAutocompleteProps {
   value: string;
@@ -38,114 +23,31 @@ export function BranchAutocomplete({
   disabled = false,
   "data-testid": testId,
 }: BranchAutocompleteProps) {
-  const [open, setOpen] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState("");
-
   // Always include "main" at the top of suggestions
-  const allBranches = React.useMemo(() => {
+  const branchOptions: AutocompleteOption[] = React.useMemo(() => {
     const branchSet = new Set(["main", ...branches]);
-    return Array.from(branchSet);
+    return Array.from(branchSet).map((branch) => ({
+      value: branch,
+      label: branch,
+      badge: branch === "main" ? "default" : undefined,
+    }));
   }, [branches]);
 
-  // Filter branches based on input
-  const filteredBranches = React.useMemo(() => {
-    if (!inputValue) return allBranches;
-    const lower = inputValue.toLowerCase();
-    return allBranches.filter((b) => b.toLowerCase().includes(lower));
-  }, [allBranches, inputValue]);
-
-  // Check if user typed a new branch name that doesn't exist
-  const isNewBranch =
-    inputValue.trim() &&
-    !allBranches.some((b) => b.toLowerCase() === inputValue.toLowerCase());
-
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          disabled={disabled}
-          className={cn("w-full justify-between font-mono text-sm", className)}
-          data-testid={testId}
-        >
-          <span className="flex items-center gap-2 truncate">
-            <GitBranch className="w-4 h-4 shrink-0 text-muted-foreground" />
-            {value || placeholder}
-          </span>
-          <ChevronsUpDown className="opacity-50 shrink-0" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[300px] p-0" data-testid="branch-autocomplete-list">
-        <Command shouldFilter={false}>
-          <CommandInput
-            placeholder="Search or type new branch..."
-            className="h-9"
-            value={inputValue}
-            onValueChange={setInputValue}
-          />
-          <CommandList>
-            <CommandEmpty>
-              {inputValue.trim() ? (
-                <div className="py-2 px-3 text-sm">
-                  Press enter to create{" "}
-                  <code className="bg-muted px-1 rounded">{inputValue}</code>
-                </div>
-              ) : (
-                "No branches found."
-              )}
-            </CommandEmpty>
-            <CommandGroup>
-              {/* Show "Create new" option if typing a new branch name */}
-              {isNewBranch && (
-                <CommandItem
-                  value={inputValue}
-                  onSelect={() => {
-                    onChange(inputValue);
-                    setInputValue("");
-                    setOpen(false);
-                  }}
-                  className="text-[var(--status-success)]"
-                  data-testid="branch-option-create-new"
-                >
-                  <GitBranch className="w-4 h-4 mr-2" />
-                  Create &quot;{inputValue}&quot;
-                  <span className="ml-auto text-xs text-muted-foreground">
-                    (new)
-                  </span>
-                </CommandItem>
-              )}
-              {filteredBranches.map((branch) => (
-                <CommandItem
-                  key={branch}
-                  value={branch}
-                  onSelect={(currentValue) => {
-                    onChange(currentValue);
-                    setInputValue("");
-                    setOpen(false);
-                  }}
-                  data-testid={`branch-option-${branch.replace(/[/\\]/g, "-")}`}
-                >
-                  <GitBranch className="w-4 h-4 mr-2" />
-                  {branch}
-                  <Check
-                    className={cn(
-                      "ml-auto",
-                      value === branch ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                  {branch === "main" && (
-                    <span className="ml-2 text-xs text-muted-foreground">
-                      (default)
-                    </span>
-                  )}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+    <Autocomplete
+      value={value}
+      onChange={onChange}
+      options={branchOptions}
+      placeholder={placeholder}
+      searchPlaceholder="Search or type new branch..."
+      emptyMessage="No branches found."
+      className={className}
+      disabled={disabled}
+      icon={GitBranch}
+      allowCreate
+      createLabel={(v) => `Create "${v}"`}
+      data-testid={testId}
+      itemTestIdPrefix="branch-option"
+    />
   );
 }