feat: enhance UI components and branch management

apps/app/package.json

@@ -45,9 +45,11 @@
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-query": "^5.90.12",

apps/app/playwright.config.ts

@@ -3,14 +3,15 @@ import { defineConfig, devices } from "@playwright/test";
 const port = process.env.TEST_PORT || 3007;
 const serverPort = process.env.TEST_SERVER_PORT || 3008;
 const reuseServer = process.env.TEST_REUSE_SERVER === "true";
-const mockAgent = process.env.CI === "true" || process.env.AUTOMAKER_MOCK_AGENT === "true";
+const mockAgent =
+  process.env.CI === "true" || process.env.AUTOMAKER_MOCK_AGENT === "true";
 
 export default defineConfig({
   testDir: "./tests",
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+  workers: undefined,
   reporter: "html",
   timeout: 30000,
   use: {

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

@@ -35,6 +35,7 @@ interface AutocompleteProps {
   emptyMessage?: string;
   className?: string;
   disabled?: boolean;
+  error?: boolean;
   icon?: LucideIcon;
   allowCreate?: boolean;
   createLabel?: (value: string) => string;
@@ -58,6 +59,7 @@ export function Autocomplete({
   emptyMessage = "No results found.",
   className,
   disabled = false,
+  error = false,
   icon: Icon,
   allowCreate = false,
   createLabel = (v) => `Create "${v}"`,
@@ -130,6 +132,7 @@ export function Autocomplete({
           className={cn(
             "w-full justify-between",
             Icon && "font-mono text-sm",
+            error && "border-destructive focus-visible:ring-destructive",
             className
           )}
           data-testid={testId}

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

@@ -11,6 +11,7 @@ interface BranchAutocompleteProps {
   placeholder?: string;
   className?: string;
   disabled?: boolean;
+  error?: boolean;
   "data-testid"?: string;
 }
 
@@ -21,6 +22,7 @@ export function BranchAutocomplete({
   placeholder = "Select a branch...",
   className,
   disabled = false,
+  error = false,
   "data-testid": testId,
 }: BranchAutocompleteProps) {
   // Always include "main" at the top of suggestions
@@ -43,6 +45,7 @@ export function BranchAutocomplete({
       emptyMessage="No branches found."
       className={className}
       disabled={disabled}
+      error={error}
       icon={GitBranch}
       allowCreate
       createLabel={(v) => `Create "${v}"`}

apps/app/src/components/ui/dialog.tsx

@@ -87,16 +87,18 @@ function DialogOverlay({
   );
 }
 
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  compact = false,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+export type DialogContentProps = Omit<
+  React.ComponentProps<typeof DialogPrimitive.Content>,
+  "ref"
+> & {
   showCloseButton?: boolean;
   compact?: boolean;
-}) {
+};
+
+const DialogContent = React.forwardRef<
+  HTMLDivElement,
+  DialogContentProps
+>(({ className, children, showCloseButton = true, compact = false, ...props }, ref) => {
   // Check if className contains a custom max-width
   const hasCustomMaxWidth =
     typeof className === "string" && className.includes("max-w-");
@@ -105,6 +107,7 @@ function DialogContent({
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
       <DialogContentPrimitive
+        ref={ref}
         data-slot="dialog-content"
         className={cn(
           "fixed top-[50%] left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
@@ -148,7 +151,9 @@ function DialogContent({
       </DialogContentPrimitive>
     </DialogPortal>
   );
-}
+});
+
+DialogContent.displayName = "DialogContent";
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (

apps/app/src/components/ui/radio-group.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
+
+

apps/app/src/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
+
+