Merge pull request #99 from AutoMaker-Org/feat/ai-profiles-view-enhancement

Enhanced AI profiles view with better UX and comprehensive test coverage.

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

@@ -15,7 +15,7 @@ function Input({ className, type, startAddon, endAddon, ...props }: InputProps)
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground/60 selection:bg-primary selection:text-primary-foreground bg-input border-input h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground/60 selection:bg-primary selection:text-primary-foreground bg-input border-border h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         // Inner shadow for depth
         "shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]",
         // Animated focus ring
@@ -39,7 +39,7 @@ function Input({ className, type, startAddon, endAddon, ...props }: InputProps)
   return (
     <div
       className={cn(
-        "flex items-center h-9 w-full rounded-md border border-input bg-input shadow-xs",
+        "flex items-center h-9 w-full rounded-md border border-border bg-input shadow-xs",
         "shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]",
         "transition-[box-shadow,border-color] duration-200 ease-out",
         "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",

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

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "placeholder:text-muted-foreground/60 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input min-h-[80px] w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm resize-none",
+        "placeholder:text-muted-foreground/60 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-border min-h-[80px] w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm resize-none",
         // Inner shadow for depth
         "shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]",
         // Animated focus ring

apps/app/src/components/views/profiles-view.tsx

@@ -1,19 +1,10 @@
 "use client";
 
-import { useState, useMemo, useCallback, useEffect } from "react";
+import { useState, useMemo, useCallback } from "react";
 import {
   useAppStore,
   AIProfile,
-  AgentModel,
-  ThinkingLevel,
-  ModelProvider,
 } from "@/store/app-store";
-import { Button } from "@/components/ui/button";
-import { HotkeyButton } from "@/components/ui/hotkey-button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { cn, modelSupportsThinking } from "@/lib/utils";
 import {
   useKeyboardShortcuts,
   useKeyboardShortcutsConfig,
@@ -23,27 +14,12 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import {
-  UserCircle,
-  Plus,
-  Pencil,
-  Trash2,
-  Brain,
-  Zap,
-  Scale,
-  Cpu,
-  Rocket,
-  Sparkles,
-  GripVertical,
-  Lock,
-  Check,
-  RefreshCw,
-} from "lucide-react";
+import { Sparkles } from "lucide-react";
 import { toast } from "sonner";
+import { DeleteConfirmDialog } from "@/components/ui/delete-confirm-dialog";
 import {
   DndContext,
   DragEndEvent,
@@ -54,353 +30,13 @@ import {
 } from "@dnd-kit/core";
 import {
   SortableContext,
-  useSortable,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-
-// Icon mapping for profiles
-const PROFILE_ICONS: Record<
-  string,
-  React.ComponentType<{ className?: string }>
-> = {
-  Brain,
-  Zap,
-  Scale,
-  Cpu,
-  Rocket,
-  Sparkles,
-};
-
-// Available icons for selection
-const ICON_OPTIONS = [
-  { name: "Brain", icon: Brain },
-  { name: "Zap", icon: Zap },
-  { name: "Scale", icon: Scale },
-  { name: "Cpu", icon: Cpu },
-  { name: "Rocket", icon: Rocket },
-  { name: "Sparkles", icon: Sparkles },
-];
-
-// Model options for the form
-const CLAUDE_MODELS: { id: AgentModel; label: string }[] = [
-  { id: "haiku", label: "Claude Haiku" },
-  { id: "sonnet", label: "Claude Sonnet" },
-  { id: "opus", label: "Claude Opus" },
-];
-
-const THINKING_LEVELS: { id: ThinkingLevel; label: string }[] = [
-  { id: "none", label: "None" },
-  { id: "low", label: "Low" },
-  { id: "medium", label: "Medium" },
-  { id: "high", label: "High" },
-  { id: "ultrathink", label: "Ultrathink" },
-];
-
-// Helper to determine provider from model
-function getProviderFromModel(model: AgentModel): ModelProvider {
-  return "claude";
-}
-
-// Sortable Profile Card Component
-function SortableProfileCard({
-  profile,
-  onEdit,
-  onDelete,
-}: {
-  profile: AIProfile;
-  onEdit: () => void;
-  onDelete: () => void;
-}) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: profile.id });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-  };
-
-  const IconComponent = profile.icon ? PROFILE_ICONS[profile.icon] : Brain;
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={cn(
-        "group relative flex items-start gap-4 p-4 rounded-xl border bg-card transition-all",
-        isDragging && "shadow-lg",
-        profile.isBuiltIn
-          ? "border-border/50"
-          : "border-border hover:border-primary/50 hover:shadow-sm"
-      )}
-      data-testid={`profile-card-${profile.id}`}
-    >
-      {/* Drag Handle */}
-      <button
-        {...attributes}
-        {...listeners}
-        className="p-1 rounded hover:bg-accent cursor-grab active:cursor-grabbing flex-shrink-0 mt-1"
-        data-testid={`profile-drag-handle-${profile.id}`}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <GripVertical className="h-4 w-4 text-muted-foreground" />
-      </button>
-
-      {/* Icon */}
-      <div
-        className="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center bg-primary/10"
-      >
-        {IconComponent && (
-          <IconComponent className="w-5 h-5 text-primary" />
-        )}
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <h3 className="font-semibold text-foreground">{profile.name}</h3>
-          {profile.isBuiltIn && (
-            <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
-              <Lock className="w-2.5 h-2.5" />
-              Built-in
-            </span>
-          )}
-        </div>
-        <p className="text-sm text-muted-foreground mt-0.5 line-clamp-2">
-          {profile.description}
-        </p>
-        <div className="flex items-center gap-2 mt-2 flex-wrap">
-          <span
-            className="text-xs px-2 py-0.5 rounded-full border border-primary/30 text-primary bg-primary/10"
-          >
-            {profile.model}
-          </span>
-          {profile.thinkingLevel !== "none" && (
-            <span className="text-xs px-2 py-0.5 rounded-full border border-amber-500/30 text-amber-600 dark:text-amber-400 bg-amber-500/10">
-              {profile.thinkingLevel}
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Actions */}
-      {!profile.isBuiltIn && (
-        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onEdit}
-            className="h-8 w-8 p-0"
-            data-testid={`edit-profile-${profile.id}`}
-          >
-            <Pencil className="w-4 h-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onDelete}
-            className="h-8 w-8 p-0 text-destructive hover:text-destructive"
-            data-testid={`delete-profile-${profile.id}`}
-          >
-            <Trash2 className="w-4 h-4" />
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// Profile Form Component
-function ProfileForm({
-  profile,
-  onSave,
-  onCancel,
-  isEditing,
-  hotkeyActive,
-}: {
-  profile: Partial<AIProfile>;
-  onSave: (profile: Omit<AIProfile, "id">) => void;
-  onCancel: () => void;
-  isEditing: boolean;
-  hotkeyActive: boolean;
-}) {
-  const [formData, setFormData] = useState({
-    name: profile.name || "",
-    description: profile.description || "",
-    model: profile.model || ("opus" as AgentModel),
-    thinkingLevel: profile.thinkingLevel || ("none" as ThinkingLevel),
-    icon: profile.icon || "Brain",
-  });
-
-  const provider = getProviderFromModel(formData.model);
-  const supportsThinking = modelSupportsThinking(formData.model);
-
-  const handleModelChange = (model: AgentModel) => {
-    setFormData({
-      ...formData,
-      model,
-    });
-  };
-
-  const handleSubmit = () => {
-    if (!formData.name.trim()) {
-      toast.error("Please enter a profile name");
-      return;
-    }
-
-    onSave({
-      name: formData.name.trim(),
-      description: formData.description.trim(),
-      model: formData.model,
-      thinkingLevel: supportsThinking ? formData.thinkingLevel : "none",
-      provider,
-      isBuiltIn: false,
-      icon: formData.icon,
-    });
-  };
-
-  return (
-    <div className="space-y-4">
-      {/* Name */}
-      <div className="space-y-2">
-        <Label htmlFor="profile-name">Profile Name</Label>
-        <Input
-          id="profile-name"
-          value={formData.name}
-          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-          placeholder="e.g., Heavy Task, Quick Fix"
-          data-testid="profile-name-input"
-        />
-      </div>
-
-      {/* Description */}
-      <div className="space-y-2">
-        <Label htmlFor="profile-description">Description</Label>
-        <Textarea
-          id="profile-description"
-          value={formData.description}
-          onChange={(e) =>
-            setFormData({ ...formData, description: e.target.value })
-          }
-          placeholder="Describe when to use this profile..."
-          rows={2}
-          data-testid="profile-description-input"
-        />
-      </div>
-
-      {/* Icon Selection */}
-      <div className="space-y-2">
-        <Label>Icon</Label>
-        <div className="flex gap-2 flex-wrap">
-          {ICON_OPTIONS.map(({ name, icon: Icon }) => (
-            <button
-              key={name}
-              type="button"
-              onClick={() => setFormData({ ...formData, icon: name })}
-              className={cn(
-                "w-10 h-10 rounded-lg flex items-center justify-center border transition-colors",
-                formData.icon === name
-                  ? "bg-primary text-primary-foreground border-primary"
-                  : "bg-background hover:bg-accent border-input"
-              )}
-              data-testid={`icon-select-${name}`}
-            >
-              <Icon className="w-5 h-5" />
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Model Selection */}
-      <div className="space-y-2">
-        <Label className="flex items-center gap-2">
-          <Brain className="w-4 h-4 text-primary" />
-          Model
-        </Label>
-        <div className="flex gap-2 flex-wrap">
-          {CLAUDE_MODELS.map(({ id, label }) => (
-            <button
-              key={id}
-              type="button"
-              onClick={() => handleModelChange(id)}
-              className={cn(
-                "flex-1 min-w-[100px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
-                formData.model === id
-                  ? "bg-primary text-primary-foreground border-primary"
-                  : "bg-background hover:bg-accent border-input"
-              )}
-              data-testid={`model-select-${id}`}
-            >
-              {label.replace("Claude ", "")}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Thinking Level */}
-      {supportsThinking && (
-        <div className="space-y-2">
-          <Label className="flex items-center gap-2">
-            <Brain className="w-4 h-4 text-amber-500" />
-            Thinking Level
-          </Label>
-          <div className="flex gap-2 flex-wrap">
-            {THINKING_LEVELS.map(({ id, label }) => (
-              <button
-                key={id}
-                type="button"
-                onClick={() => {
-                  setFormData({ ...formData, thinkingLevel: id });
-                  if (id === "ultrathink") {
-                    toast.warning("Ultrathink uses extensive reasoning", {
-                      description:
-                        "Best for complex architecture, migrations, or deep debugging (~$0.48/task).",
-                      duration: 4000,
-                    });
-                  }
-                }}
-                className={cn(
-                  "flex-1 min-w-[70px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
-                  formData.thinkingLevel === id
-                    ? "bg-amber-500 text-white border-amber-400"
-                    : "bg-background hover:bg-accent border-input"
-                )}
-                data-testid={`thinking-select-${id}`}
-              >
-                {label}
-              </button>
-            ))}
-          </div>
-          <p className="text-xs text-muted-foreground">
-            Higher levels give more time to reason through complex problems.
-          </p>
-        </div>
-      )}
-
-      {/* Actions */}
-      <DialogFooter className="pt-4">
-        <Button variant="ghost" onClick={onCancel}>
-          Cancel
-        </Button>
-        <HotkeyButton
-          onClick={handleSubmit}
-          hotkey={{ key: "Enter", cmdCtrl: true }}
-          hotkeyActive={hotkeyActive}
-          data-testid="save-profile-button"
-        >
-          {isEditing ? "Save Changes" : "Create Profile"}
-        </HotkeyButton>
-      </DialogFooter>
-    </div>
-  );
-}
+import {
+  SortableProfileCard,
+  ProfileForm,
+  ProfilesHeader,
+} from "./profiles-view/components";
 
 export function ProfilesView() {
   const {
@@ -415,6 +51,7 @@ export function ProfilesView() {
 
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [editingProfile, setEditingProfile] = useState<AIProfile | null>(null);
+  const [profileToDelete, setProfileToDelete] = useState<AIProfile | null>(null);
 
   // Sensors for drag-and-drop
   const sensors = useSensors(
@@ -469,13 +106,14 @@ export function ProfilesView() {
     }
   };
 
-  const handleDeleteProfile = (profile: AIProfile) => {
-    if (profile.isBuiltIn) return;
+  const confirmDeleteProfile = () => {
+    if (!profileToDelete) return;
 
-    removeAIProfile(profile.id);
+    removeAIProfile(profileToDelete.id);
     toast.success("Profile deleted", {
-      description: `Deleted "${profile.name}" profile`,
+      description: `Deleted "${profileToDelete.name}" profile`,
     });
+    setProfileToDelete(null);
   };
 
   const handleResetProfiles = () => {
@@ -508,45 +146,11 @@ export function ProfilesView() {
       data-testid="profiles-view"
     >
       {/* Header Section */}
-      <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
-        <div className="px-8 py-6">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center">
-                <UserCircle className="w-5 h-5 text-primary-foreground" />
-              </div>
-              <div>
-                <h1 className="text-2xl font-bold text-foreground">
-                  AI Profiles
-                </h1>
-                <p className="text-sm text-muted-foreground">
-                  Create and manage model configuration presets
-                </p>
-              </div>
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                onClick={handleResetProfiles}
-                data-testid="refresh-profiles-button"
-                className="gap-2"
-              >
-                <RefreshCw className="w-4 h-4" />
-                Refresh Defaults
-              </Button>
-              <HotkeyButton
-                onClick={() => setShowAddDialog(true)}
-                hotkey={shortcuts.addProfile}
-                hotkeyActive={false}
-                data-testid="add-profile-button"
-              >
-                <Plus className="w-4 h-4 mr-2" />
-                New Profile
-              </HotkeyButton>
-            </div>
-          </div>
-        </div>
-      </div>
+      <ProfilesHeader
+        onResetProfiles={handleResetProfiles}
+        onAddProfile={() => setShowAddDialog(true)}
+        addProfileHotkey={shortcuts.addProfile}
+      />
 
       {/* Content */}
       <div className="flex-1 overflow-y-auto p-8">
@@ -562,19 +166,14 @@ export function ProfilesView() {
               </span>
             </div>
             {customProfiles.length === 0 ? (
-              <div className="rounded-xl border border-dashed border-border p-8 text-center">
-                <Sparkles className="w-10 h-10 text-muted-foreground mx-auto mb-3 opacity-50" />
-                <p className="text-muted-foreground">
+              <div
+                className="group rounded-xl border border-dashed border-border p-8 text-center transition-all duration-300 hover:border-primary hover:bg-primary/5 cursor-pointer"
+                onClick={() => setShowAddDialog(true)}
+              >
+                <Sparkles className="w-10 h-10 text-muted-foreground mx-auto mb-3 opacity-50 transition-all duration-300 group-hover:text-primary group-hover:opacity-100 group-hover:scale-110 group-hover:rotate-12" />
+                <p className="text-muted-foreground transition-colors duration-300 group-hover:text-foreground">
                   No custom profiles yet. Create one to get started!
                 </p>
-                <Button
-                  variant="outline"
-                  className="mt-4"
-                  onClick={() => setShowAddDialog(true)}
-                >
-                  <Plus className="w-4 h-4 mr-2" />
-                  Create Profile
-                </Button>
               </div>
             ) : (
               <DndContext
@@ -592,7 +191,7 @@ export function ProfilesView() {
                         key={profile.id}
                         profile={profile}
                         onEdit={() => setEditingProfile(profile)}
-                        onDelete={() => handleDeleteProfile(profile)}
+                        onDelete={() => setProfileToDelete(profile)}
                       />
                     ))}
                   </div>
@@ -642,8 +241,8 @@ export function ProfilesView() {
 
       {/* Add Profile Dialog */}
       <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
-        <DialogContent data-testid="add-profile-dialog">
-          <DialogHeader>
+        <DialogContent data-testid="add-profile-dialog" className="flex flex-col max-h-[calc(100vh-4rem)]">
+          <DialogHeader className="shrink-0">
             <DialogTitle>Create New Profile</DialogTitle>
             <DialogDescription>
               Define a reusable model configuration preset.
@@ -664,8 +263,8 @@ export function ProfilesView() {
         open={!!editingProfile}
         onOpenChange={() => setEditingProfile(null)}
       >
-        <DialogContent data-testid="edit-profile-dialog">
-          <DialogHeader>
+        <DialogContent data-testid="edit-profile-dialog" className="flex flex-col max-h-[calc(100vh-4rem)]">
+          <DialogHeader className="shrink-0">
             <DialogTitle>Edit Profile</DialogTitle>
             <DialogDescription>Modify your profile settings.</DialogDescription>
           </DialogHeader>
@@ -680,6 +279,22 @@ export function ProfilesView() {
           )}
         </DialogContent>
       </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <DeleteConfirmDialog
+        open={!!profileToDelete}
+        onOpenChange={(open) => !open && setProfileToDelete(null)}
+        onConfirm={confirmDeleteProfile}
+        title="Delete Profile"
+        description={
+          profileToDelete
+            ? `Are you sure you want to delete "${profileToDelete.name}"? This action cannot be undone.`
+            : ""
+        }
+        confirmText="Delete Profile"
+        testId="delete-profile-confirm-dialog"
+        confirmTestId="confirm-delete-profile-button"
+      />
     </div>
   );
 }

apps/app/src/components/views/profiles-view/components/index.ts

@@ -0,0 +1,3 @@
+export { SortableProfileCard } from "./sortable-profile-card";
+export { ProfileForm } from "./profile-form";
+export { ProfilesHeader } from "./profiles-header";

apps/app/src/components/views/profiles-view/components/profile-form.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { cn, modelSupportsThinking } from "@/lib/utils";
+import { DialogFooter } from "@/components/ui/dialog";
+import { Brain } from "lucide-react";
+import { toast } from "sonner";
+import type { AIProfile, AgentModel, ThinkingLevel } from "@/store/app-store";
+import { CLAUDE_MODELS, THINKING_LEVELS, ICON_OPTIONS } from "../constants";
+import { getProviderFromModel } from "../utils";
+
+interface ProfileFormProps {
+  profile: Partial<AIProfile>;
+  onSave: (profile: Omit<AIProfile, "id">) => void;
+  onCancel: () => void;
+  isEditing: boolean;
+  hotkeyActive: boolean;
+}
+
+export function ProfileForm({
+  profile,
+  onSave,
+  onCancel,
+  isEditing,
+  hotkeyActive,
+}: ProfileFormProps) {
+  const [formData, setFormData] = useState({
+    name: profile.name || "",
+    description: profile.description || "",
+    model: profile.model || ("opus" as AgentModel),
+    thinkingLevel: profile.thinkingLevel || ("none" as ThinkingLevel),
+    icon: profile.icon || "Brain",
+  });
+
+  const provider = getProviderFromModel(formData.model);
+  const supportsThinking = modelSupportsThinking(formData.model);
+
+  const handleModelChange = (model: AgentModel) => {
+    setFormData({
+      ...formData,
+      model,
+    });
+  };
+
+  const handleSubmit = () => {
+    if (!formData.name.trim()) {
+      toast.error("Please enter a profile name");
+      return;
+    }
+
+    onSave({
+      name: formData.name.trim(),
+      description: formData.description.trim(),
+      model: formData.model,
+      thinkingLevel: supportsThinking ? formData.thinkingLevel : "none",
+      provider,
+      isBuiltIn: false,
+      icon: formData.icon,
+    });
+  };
+
+  return (
+    <>
+      <div className="overflow-y-auto flex-1 min-h-0 space-y-4 pr-3 -mr-3 pl-1">
+        {/* Name */}
+        <div className="mt-2 space-y-2">
+          <Label htmlFor="profile-name">Profile Name</Label>
+          <Input
+            id="profile-name"
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            placeholder="e.g., Heavy Task, Quick Fix"
+            data-testid="profile-name-input"
+          />
+        </div>
+
+        {/* Description */}
+        <div className="space-y-2">
+          <Label htmlFor="profile-description">Description</Label>
+          <Textarea
+            id="profile-description"
+            value={formData.description}
+            onChange={(e) =>
+              setFormData({ ...formData, description: e.target.value })
+            }
+            placeholder="Describe when to use this profile..."
+            rows={2}
+            data-testid="profile-description-input"
+          />
+        </div>
+
+        {/* Icon Selection */}
+        <div className="space-y-2">
+          <Label>Icon</Label>
+          <div className="flex gap-2 flex-wrap">
+            {ICON_OPTIONS.map(({ name, icon: Icon }) => (
+              <button
+                key={name}
+                type="button"
+                onClick={() => setFormData({ ...formData, icon: name })}
+                className={cn(
+                  "w-10 h-10 rounded-lg flex items-center justify-center border transition-colors",
+                  formData.icon === name
+                    ? "bg-primary text-primary-foreground border-primary"
+                    : "bg-background hover:bg-accent border-border"
+                )}
+                data-testid={`icon-select-${name}`}
+              >
+                <Icon className="w-5 h-5" />
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Model Selection */}
+        <div className="space-y-2">
+          <Label className="flex items-center gap-2">
+            <Brain className="w-4 h-4 text-primary" />
+            Model
+          </Label>
+          <div className="flex gap-2 flex-wrap">
+            {CLAUDE_MODELS.map(({ id, label }) => (
+              <button
+                key={id}
+                type="button"
+                onClick={() => handleModelChange(id)}
+                className={cn(
+                  "flex-1 min-w-[100px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
+                  formData.model === id
+                    ? "bg-primary text-primary-foreground border-primary"
+                    : "bg-background hover:bg-accent border-border"
+                )}
+                data-testid={`model-select-${id}`}
+              >
+                {label.replace("Claude ", "")}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Thinking Level */}
+        {supportsThinking && (
+          <div className="space-y-2">
+            <Label className="flex items-center gap-2">
+              <Brain className="w-4 h-4 text-amber-500" />
+              Thinking Level
+            </Label>
+            <div className="flex gap-2 flex-wrap">
+              {THINKING_LEVELS.map(({ id, label }) => (
+                <button
+                  key={id}
+                  type="button"
+                  onClick={() => {
+                    setFormData({ ...formData, thinkingLevel: id });
+                    if (id === "ultrathink") {
+                      toast.warning("Ultrathink uses extensive reasoning", {
+                        description:
+                          "Best for complex architecture, migrations, or deep debugging (~$0.48/task).",
+                        duration: 4000,
+                      });
+                    }
+                  }}
+                  className={cn(
+                    "flex-1 min-w-[70px] px-3 py-2 rounded-md border text-sm font-medium transition-colors",
+                    formData.thinkingLevel === id
+                      ? "bg-amber-500 text-white border-amber-400"
+                      : "bg-background hover:bg-accent border-border"
+                  )}
+                  data-testid={`thinking-select-${id}`}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Higher levels give more time to reason through complex problems.
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* Actions */}
+      <DialogFooter className="pt-4 border-t border-border mt-4 shrink-0">
+        <Button variant="ghost" onClick={onCancel}>
+          Cancel
+        </Button>
+        <HotkeyButton
+          onClick={handleSubmit}
+          hotkey={{ key: "Enter", cmdCtrl: true }}
+          hotkeyActive={hotkeyActive}
+          data-testid="save-profile-button"
+        >
+          {isEditing ? "Save Changes" : "Create Profile"}
+        </HotkeyButton>
+      </DialogFooter>
+    </>
+  );
+}
+

apps/app/src/components/views/profiles-view/components/profiles-header.tsx

@@ -0,0 +1,58 @@
+import { Button } from "@/components/ui/button";
+import { HotkeyButton } from "@/components/ui/hotkey-button";
+import { UserCircle, Plus, RefreshCw } from "lucide-react";
+
+interface ProfilesHeaderProps {
+  onResetProfiles: () => void;
+  onAddProfile: () => void;
+  addProfileHotkey: string;
+}
+
+export function ProfilesHeader({
+  onResetProfiles,
+  onAddProfile,
+  addProfileHotkey,
+}: ProfilesHeaderProps) {
+  return (
+    <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
+      <div className="px-8 py-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center">
+              <UserCircle className="w-5 h-5 text-primary-foreground" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-foreground">
+                AI Profiles
+              </h1>
+              <p className="text-sm text-muted-foreground">
+                Create and manage model configuration presets
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              onClick={onResetProfiles}
+              data-testid="refresh-profiles-button"
+              className="gap-2"
+            >
+              <RefreshCw className="w-4 h-4" />
+              Refresh Defaults
+            </Button>
+            <HotkeyButton
+              onClick={onAddProfile}
+              hotkey={addProfileHotkey}
+              hotkeyActive={false}
+              data-testid="add-profile-button"
+            >
+              <Plus className="w-4 h-4 mr-2" />
+              New Profile
+            </HotkeyButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

apps/app/src/components/views/profiles-view/components/sortable-profile-card.tsx

@@ -0,0 +1,127 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { GripVertical, Lock, Pencil, Trash2, Brain } from "lucide-react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type { AIProfile } from "@/store/app-store";
+import { PROFILE_ICONS } from "../constants";
+
+interface SortableProfileCardProps {
+  profile: AIProfile;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export function SortableProfileCard({
+  profile,
+  onEdit,
+  onDelete,
+}: SortableProfileCardProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: profile.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const IconComponent = profile.icon ? PROFILE_ICONS[profile.icon] : Brain;
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "group relative flex items-start gap-4 p-4 rounded-xl border bg-card transition-all",
+        isDragging && "shadow-lg",
+        profile.isBuiltIn
+          ? "border-border/50"
+          : "border-border hover:border-primary/50 hover:shadow-sm"
+      )}
+      data-testid={`profile-card-${profile.id}`}
+    >
+      {/* Drag Handle */}
+      <button
+        {...attributes}
+        {...listeners}
+        className="p-1 rounded hover:bg-accent cursor-grab active:cursor-grabbing flex-shrink-0 mt-1"
+        data-testid={`profile-drag-handle-${profile.id}`}
+        onClick={(e) => e.stopPropagation()}
+        aria-label={`Reorder ${profile.name} profile`}
+      >
+        <GripVertical className="h-4 w-4 text-muted-foreground" />
+      </button>
+
+      {/* Icon */}
+      <div
+        className="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center bg-primary/10"
+      >
+        {IconComponent && (
+          <IconComponent className="w-5 h-5 text-primary" />
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <h3 className="font-semibold text-foreground">{profile.name}</h3>
+          {profile.isBuiltIn && (
+            <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
+              <Lock className="w-2.5 h-2.5" />
+              Built-in
+            </span>
+          )}
+        </div>
+        <p className="text-sm text-muted-foreground mt-0.5 line-clamp-2">
+          {profile.description}
+        </p>
+        <div className="flex items-center gap-2 mt-2 flex-wrap">
+          <span
+            className="text-xs px-2 py-0.5 rounded-full border border-primary/30 text-primary bg-primary/10"
+          >
+            {profile.model}
+          </span>
+          {profile.thinkingLevel !== "none" && (
+            <span className="text-xs px-2 py-0.5 rounded-full border border-amber-500/30 text-amber-600 dark:text-amber-400 bg-amber-500/10">
+              {profile.thinkingLevel}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Actions */}
+      {!profile.isBuiltIn && (
+        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onEdit}
+            className="h-8 w-8 p-0"
+            data-testid={`edit-profile-${profile.id}`}
+            aria-label={`Edit ${profile.name} profile`}
+          >
+            <Pencil className="w-4 h-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onDelete}
+            className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+            data-testid={`delete-profile-${profile.id}`}
+            aria-label={`Delete ${profile.name} profile`}
+          >
+            <Trash2 className="w-4 h-4" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+

apps/app/src/components/views/profiles-view/constants.ts

@@ -0,0 +1,48 @@
+import {
+  Brain,
+  Zap,
+  Scale,
+  Cpu,
+  Rocket,
+  Sparkles,
+} from "lucide-react";
+import type { AgentModel, ThinkingLevel } from "@/store/app-store";
+
+// Icon mapping for profiles
+export const PROFILE_ICONS: Record<
+  string,
+  React.ComponentType<{ className?: string }>
+> = {
+  Brain,
+  Zap,
+  Scale,
+  Cpu,
+  Rocket,
+  Sparkles,
+};
+
+// Available icons for selection
+export const ICON_OPTIONS = [
+  { name: "Brain", icon: Brain },
+  { name: "Zap", icon: Zap },
+  { name: "Scale", icon: Scale },
+  { name: "Cpu", icon: Cpu },
+  { name: "Rocket", icon: Rocket },
+  { name: "Sparkles", icon: Sparkles },
+];
+
+// Model options for the form
+export const CLAUDE_MODELS: { id: AgentModel; label: string }[] = [
+  { id: "haiku", label: "Claude Haiku" },
+  { id: "sonnet", label: "Claude Sonnet" },
+  { id: "opus", label: "Claude Opus" },
+];
+
+export const THINKING_LEVELS: { id: ThinkingLevel; label: string }[] = [
+  { id: "none", label: "None" },
+  { id: "low", label: "Low" },
+  { id: "medium", label: "Medium" },
+  { id: "high", label: "High" },
+  { id: "ultrathink", label: "Ultrathink" },
+];
+

apps/app/src/components/views/profiles-view/utils.ts

@@ -0,0 +1,7 @@
+import type { AgentModel, ModelProvider } from "@/store/app-store";
+
+// Helper to determine provider from model
+export function getProviderFromModel(model: AgentModel): ModelProvider {
+  return "claude";
+}
+

apps/app/tests/utils/components/toasts.ts

@@ -25,17 +25,29 @@ export async function waitForErrorToast(
   titleText?: string,
   options?: { timeout?: number }
 ): Promise<Locator> {
-  // Sonner toasts use data-sonner-toast and data-type="error" for error toasts
-  const toastSelector = titleText
-    ? `[data-sonner-toast][data-type="error"]:has-text("${titleText}")`
-    : '[data-sonner-toast][data-type="error"]';
+  // Try multiple selectors for error toasts since Sonner versions may differ
+  // 1. Try with data-type="error" attribute
+  // 2. Fallback to any toast with the text (error styling might vary)
+  const timeout = options?.timeout ?? 5000;
 
-  const toast = page.locator(toastSelector).first();
-  await toast.waitFor({
-    timeout: options?.timeout ?? 5000,
-    state: "visible",
-  });
-  return toast;
+  if (titleText) {
+    // First try specific error type, then fallback to any toast with text
+    const errorToast = page.locator(
+      `[data-sonner-toast][data-type="error"]:has-text("${titleText}"), [data-sonner-toast]:has-text("${titleText}")`
+    ).first();
+    await errorToast.waitFor({
+      timeout,
+      state: "visible",
+    });
+    return errorToast;
+  } else {
+    const errorToast = page.locator('[data-sonner-toast][data-type="error"]').first();
+    await errorToast.waitFor({
+      timeout,
+      state: "visible",
+    });
+    return errorToast;
+  }
 }
 
 /**

apps/app/tests/utils/core/interactions.ts

@@ -1,6 +1,22 @@
 import { Page } from "@playwright/test";
 import { getByTestId, getButtonByText } from "./elements";
 
+/**
+ * Get the platform-specific modifier key (Meta for Mac, Control for Windows/Linux)
+ * This is used for keyboard shortcuts like Cmd+Enter or Ctrl+Enter
+ */
+export function getPlatformModifier(): "Meta" | "Control" {
+  return process.platform === "darwin" ? "Meta" : "Control";
+}
+
+/**
+ * Press the platform-specific modifier + a key (e.g., Cmd+Enter or Ctrl+Enter)
+ */
+export async function pressModifierEnter(page: Page): Promise<void> {
+  const modifier = getPlatformModifier();
+  await page.keyboard.press(`${modifier}+Enter`);
+}
+
 /**
  * Click an element by its data-testid attribute
  */
@@ -56,8 +72,15 @@ export async function focusOnInput(page: Page, testId: string): Promise<void> {
 
 /**
  * Close any open dialog by pressing Escape
+ * Waits for dialog to be removed from DOM rather than using arbitrary timeout
  */
 export async function closeDialogWithEscape(page: Page): Promise<void> {
   await page.keyboard.press("Escape");
-  await page.waitForTimeout(100); // Give dialog time to close
+  // Wait for any dialog overlay to disappear
+  await page
+    .locator('[data-radix-dialog-overlay], [role="dialog"]')
+    .waitFor({ state: "hidden", timeout: 5000 })
+    .catch(() => {
+      // Dialog may have already closed or not exist
+    });
 }

apps/app/tests/utils/index.ts

@@ -19,6 +19,7 @@ export * from "./views/spec-editor";
 export * from "./views/agent";
 export * from "./views/settings";
 export * from "./views/setup";
+export * from "./views/profiles";
 
 // Component utilities
 export * from "./components/dialogs";

apps/app/tests/utils/project/setup.ts

@@ -633,3 +633,120 @@ export async function setupComplete(page: Page): Promise<void> {
     localStorage.setItem("automaker-setup", JSON.stringify(setupState));
   });
 }
+
+/**
+ * Set up a mock project with AI profiles for testing the profiles view
+ * Includes default built-in profiles and optionally custom profiles
+ */
+export async function setupMockProjectWithProfiles(
+  page: Page,
+  options?: {
+    customProfilesCount?: number;
+    includeBuiltIn?: boolean;
+  }
+): Promise<void> {
+  await page.addInitScript((opts: typeof options) => {
+    const mockProject = {
+      id: "test-project-1",
+      name: "Test Project",
+      path: "/mock/test-project",
+      lastOpened: new Date().toISOString(),
+    };
+
+    // Default built-in profiles (same as DEFAULT_AI_PROFILES from app-store.ts)
+    const builtInProfiles = [
+      {
+        id: "profile-heavy-task",
+        name: "Heavy Task",
+        description:
+          "Claude Opus with Ultrathink for complex architecture, migrations, or deep debugging.",
+        model: "opus" as const,
+        thinkingLevel: "ultrathink" as const,
+        provider: "claude" as const,
+        isBuiltIn: true,
+        icon: "Brain",
+      },
+      {
+        id: "profile-balanced",
+        name: "Balanced",
+        description:
+          "Claude Sonnet with medium thinking for typical development tasks.",
+        model: "sonnet" as const,
+        thinkingLevel: "medium" as const,
+        provider: "claude" as const,
+        isBuiltIn: true,
+        icon: "Scale",
+      },
+      {
+        id: "profile-quick-edit",
+        name: "Quick Edit",
+        description: "Claude Haiku for fast, simple edits and minor fixes.",
+        model: "haiku" as const,
+        thinkingLevel: "none" as const,
+        provider: "claude" as const,
+        isBuiltIn: true,
+        icon: "Zap",
+      },
+    ];
+
+    // Generate custom profiles if requested
+    const customProfiles = [];
+    const customCount = opts?.customProfilesCount ?? 0;
+    for (let i = 0; i < customCount; i++) {
+      customProfiles.push({
+        id: `custom-profile-${i + 1}`,
+        name: `Custom Profile ${i + 1}`,
+        description: `Test custom profile ${i + 1}`,
+        model: ["haiku", "sonnet", "opus"][i % 3] as
+          | "haiku"
+          | "sonnet"
+          | "opus",
+        thinkingLevel: ["none", "low", "medium", "high"][i % 4] as
+          | "none"
+          | "low"
+          | "medium"
+          | "high",
+        provider: "claude" as const,
+        isBuiltIn: false,
+        icon: ["Brain", "Zap", "Scale", "Cpu", "Rocket", "Sparkles"][i % 6],
+      });
+    }
+
+    // Combine profiles (built-in first, then custom)
+    const includeBuiltIn = opts?.includeBuiltIn !== false; // Default to true
+    const aiProfiles = includeBuiltIn
+      ? [...builtInProfiles, ...customProfiles]
+      : customProfiles;
+
+    const mockState = {
+      state: {
+        projects: [mockProject],
+        currentProject: mockProject,
+        theme: "dark",
+        sidebarOpen: true,
+        apiKeys: { anthropic: "", google: "", openai: "" },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+        aiProfiles: aiProfiles,
+        features: [],
+        currentView: "board", // Start at board, will navigate to profiles
+      },
+      version: 0,
+    };
+
+    localStorage.setItem("automaker-storage", JSON.stringify(mockState));
+
+    // Also mark setup as complete to skip the setup wizard
+    const setupState = {
+      state: {
+        isFirstRun: false,
+        setupComplete: true,
+        currentStep: "complete",
+        skipClaudeSetup: false,
+      },
+      version: 0,
+    };
+    localStorage.setItem("automaker-setup", JSON.stringify(setupState));
+  }, options);
+}

apps/app/tests/utils/views/profiles.ts

@@ -0,0 +1,572 @@
+import { Page, Locator } from "@playwright/test";
+import { clickElement, fillInput } from "../core/interactions";
+import { waitForElement, waitForElementHidden } from "../core/waiting";
+import { getByTestId } from "../core/elements";
+import { navigateToView } from "../navigation/views";
+
+/**
+ * Navigate to the profiles view
+ */
+export async function navigateToProfiles(page: Page): Promise<void> {
+  // Click the profiles navigation button
+  await navigateToView(page, "profiles");
+
+  // Wait for profiles view to be visible
+  await page.waitForSelector('[data-testid="profiles-view"]', {
+    state: "visible",
+    timeout: 10000,
+  });
+}
+
+// ============================================================================
+// Profile List Operations
+// ============================================================================
+
+/**
+ * Get a specific profile card by ID
+ */
+export async function getProfileCard(
+  page: Page,
+  profileId: string
+): Promise<Locator> {
+  return getByTestId(page, `profile-card-${profileId}`);
+}
+
+/**
+ * Get all profile cards (both built-in and custom)
+ */
+export async function getProfileCards(page: Page): Promise<Locator> {
+  return page.locator('[data-testid^="profile-card-"]');
+}
+
+/**
+ * Get only custom profile cards
+ */
+export async function getCustomProfiles(page: Page): Promise<Locator> {
+  // Custom profiles don't have the "Built-in" badge
+  return page.locator('[data-testid^="profile-card-"]').filter({
+    hasNot: page.locator('text="Built-in"'),
+  });
+}
+
+/**
+ * Get only built-in profile cards
+ */
+export async function getBuiltInProfiles(page: Page): Promise<Locator> {
+  // Built-in profiles have the lock icon and "Built-in" text
+  return page.locator('[data-testid^="profile-card-"]:has-text("Built-in")');
+}
+
+/**
+ * Count the number of custom profiles
+ */
+export async function countCustomProfiles(page: Page): Promise<number> {
+  const customProfiles = await getCustomProfiles(page);
+  return customProfiles.count();
+}
+
+/**
+ * Count the number of built-in profiles
+ */
+export async function countBuiltInProfiles(page: Page): Promise<number> {
+  const builtInProfiles = await getBuiltInProfiles(page);
+  return await builtInProfiles.count();
+}
+
+/**
+ * Get all custom profile IDs
+ */
+export async function getCustomProfileIds(page: Page): Promise<string[]> {
+  const allCards = await page.locator('[data-testid^="profile-card-"]').all();
+  const customIds: string[] = [];
+
+  for (const card of allCards) {
+    const builtInText = card.locator('text="Built-in"');
+    const isBuiltIn = (await builtInText.count()) > 0;
+    if (!isBuiltIn) {
+      const testId = await card.getAttribute("data-testid");
+      if (testId) {
+        // Extract ID from "profile-card-{id}"
+        const profileId = testId.replace("profile-card-", "");
+        customIds.push(profileId);
+      }
+    }
+  }
+
+  return customIds;
+}
+
+/**
+ * Get the first custom profile ID (useful after creating a profile)
+ */
+export async function getFirstCustomProfileId(page: Page): Promise<string | null> {
+  const ids = await getCustomProfileIds(page);
+  return ids.length > 0 ? ids[0] : null;
+}
+
+// ============================================================================
+// CRUD Operations
+// ============================================================================
+
+/**
+ * Click the "New Profile" button in the header
+ */
+export async function clickNewProfileButton(page: Page): Promise<void> {
+  await clickElement(page, "add-profile-button");
+  await waitForElement(page, "add-profile-dialog");
+}
+
+/**
+ * Click the empty state card to create a new profile
+ */
+export async function clickEmptyState(page: Page): Promise<void> {
+  const emptyState = page.locator(
+    '.group.rounded-xl.border.border-dashed[class*="cursor-pointer"]'
+  );
+  await emptyState.click();
+  await waitForElement(page, "add-profile-dialog");
+}
+
+/**
+ * Fill the profile form with data
+ */
+export async function fillProfileForm(
+  page: Page,
+  data: {
+    name?: string;
+    description?: string;
+    icon?: string;
+    model?: string;
+    thinkingLevel?: string;
+  }
+): Promise<void> {
+  if (data.name !== undefined) {
+    await fillProfileName(page, data.name);
+  }
+  if (data.description !== undefined) {
+    await fillProfileDescription(page, data.description);
+  }
+  if (data.icon !== undefined) {
+    await selectIcon(page, data.icon);
+  }
+  if (data.model !== undefined) {
+    await selectModel(page, data.model);
+  }
+  if (data.thinkingLevel !== undefined) {
+    await selectThinkingLevel(page, data.thinkingLevel);
+  }
+}
+
+/**
+ * Click the save button to create/update a profile
+ */
+export async function saveProfile(page: Page): Promise<void> {
+  await clickElement(page, "save-profile-button");
+  // Wait for dialog to close
+  await waitForElementHidden(page, "add-profile-dialog").catch(() => {});
+  await waitForElementHidden(page, "edit-profile-dialog").catch(() => {});
+}
+
+/**
+ * Click the cancel button in the profile dialog
+ */
+export async function cancelProfileDialog(page: Page): Promise<void> {
+  // Look for cancel button in dialog footer
+  const cancelButton = page.locator('button:has-text("Cancel")');
+  await cancelButton.click();
+  // Wait for dialog to close
+  await waitForElementHidden(page, "add-profile-dialog").catch(() => {});
+  await waitForElementHidden(page, "edit-profile-dialog").catch(() => {});
+}
+
+/**
+ * Click the edit button for a specific profile
+ */
+export async function clickEditProfile(
+  page: Page,
+  profileId: string
+): Promise<void> {
+  await clickElement(page, `edit-profile-${profileId}`);
+  await waitForElement(page, "edit-profile-dialog");
+}
+
+/**
+ * Click the delete button for a specific profile
+ */
+export async function clickDeleteProfile(
+  page: Page,
+  profileId: string
+): Promise<void> {
+  await clickElement(page, `delete-profile-${profileId}`);
+  await waitForElement(page, "delete-profile-confirm-dialog");
+}
+
+/**
+ * Confirm profile deletion in the dialog
+ */
+export async function confirmDeleteProfile(page: Page): Promise<void> {
+  await clickElement(page, "confirm-delete-profile-button");
+  await waitForElementHidden(page, "delete-profile-confirm-dialog");
+}
+
+/**
+ * Cancel profile deletion
+ */
+export async function cancelDeleteProfile(page: Page): Promise<void> {
+  await clickElement(page, "cancel-delete-button");
+  await waitForElementHidden(page, "delete-profile-confirm-dialog");
+}
+
+// ============================================================================
+// Form Field Operations
+// ============================================================================
+
+/**
+ * Fill the profile name field
+ */
+export async function fillProfileName(
+  page: Page,
+  name: string
+): Promise<void> {
+  await fillInput(page, "profile-name-input", name);
+}
+
+/**
+ * Fill the profile description field
+ */
+export async function fillProfileDescription(
+  page: Page,
+  description: string
+): Promise<void> {
+  await fillInput(page, "profile-description-input", description);
+}
+
+/**
+ * Select an icon for the profile
+ * @param iconName - Name of the icon: Brain, Zap, Scale, Cpu, Rocket, Sparkles
+ */
+export async function selectIcon(page: Page, iconName: string): Promise<void> {
+  await clickElement(page, `icon-select-${iconName}`);
+}
+
+/**
+ * Select a model for the profile
+ * @param modelId - Model ID: haiku, sonnet, opus
+ */
+export async function selectModel(page: Page, modelId: string): Promise<void> {
+  await clickElement(page, `model-select-${modelId}`);
+}
+
+/**
+ * Select a thinking level for the profile
+ * @param level - Thinking level: none, low, medium, high, ultrathink
+ */
+export async function selectThinkingLevel(
+  page: Page,
+  level: string
+): Promise<void> {
+  await clickElement(page, `thinking-select-${level}`);
+}
+
+/**
+ * Get the currently selected icon
+ */
+export async function getSelectedIcon(page: Page): Promise<string | null> {
+  // Find the icon button with primary background
+  const selectedIcon = page.locator(
+    '[data-testid^="icon-select-"][class*="bg-primary"]'
+  );
+  const testId = await selectedIcon.getAttribute("data-testid");
+  return testId ? testId.replace("icon-select-", "") : null;
+}
+
+/**
+ * Get the currently selected model
+ */
+export async function getSelectedModel(page: Page): Promise<string | null> {
+  // Find the model button with primary background
+  const selectedModel = page.locator(
+    '[data-testid^="model-select-"][class*="bg-primary"]'
+  );
+  const testId = await selectedModel.getAttribute("data-testid");
+  return testId ? testId.replace("model-select-", "") : null;
+}
+
+/**
+ * Get the currently selected thinking level
+ */
+export async function getSelectedThinkingLevel(
+  page: Page
+): Promise<string | null> {
+  // Find the thinking level button with amber background
+  const selectedLevel = page.locator(
+    '[data-testid^="thinking-select-"][class*="bg-amber-500"]'
+  );
+  const testId = await selectedLevel.getAttribute("data-testid");
+  return testId ? testId.replace("thinking-select-", "") : null;
+}
+
+// ============================================================================
+// Dialog Operations
+// ============================================================================
+
+/**
+ * Check if the add profile dialog is open
+ */
+export async function isAddProfileDialogOpen(page: Page): Promise<boolean> {
+  const dialog = await getByTestId(page, "add-profile-dialog");
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Check if the edit profile dialog is open
+ */
+export async function isEditProfileDialogOpen(page: Page): Promise<boolean> {
+  const dialog = await getByTestId(page, "edit-profile-dialog");
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Check if the delete confirmation dialog is open
+ */
+export async function isDeleteConfirmDialogOpen(page: Page): Promise<boolean> {
+  const dialog = await getByTestId(page, "delete-profile-confirm-dialog");
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Wait for any profile dialog to close
+ * This ensures all dialog animations complete before proceeding
+ */
+export async function waitForDialogClose(page: Page): Promise<void> {
+  // Wait for all profile dialogs to be hidden
+  await Promise.all([
+    waitForElementHidden(page, "add-profile-dialog").catch(() => {}),
+    waitForElementHidden(page, "edit-profile-dialog").catch(() => {}),
+    waitForElementHidden(page, "delete-profile-confirm-dialog").catch(
+      () => {}
+    ),
+  ]);
+
+  // Also wait for any Radix dialog overlay to be removed (handles animation)
+  await page
+    .locator('[data-radix-dialog-overlay]')
+    .waitFor({ state: "hidden", timeout: 2000 })
+    .catch(() => {
+      // Overlay may not exist
+    });
+}
+
+// ============================================================================
+// Profile Card Inspection
+// ============================================================================
+
+/**
+ * Get the profile name from a card
+ */
+export async function getProfileName(
+  page: Page,
+  profileId: string
+): Promise<string> {
+  const card = await getProfileCard(page, profileId);
+  const nameElement = card.locator("h3");
+  return await nameElement.textContent().then((text) => text?.trim() || "");
+}
+
+/**
+ * Get the profile description from a card
+ */
+export async function getProfileDescription(
+  page: Page,
+  profileId: string
+): Promise<string> {
+  const card = await getProfileCard(page, profileId);
+  const descElement = card.locator("p").first();
+  return await descElement.textContent().then((text) => text?.trim() || "");
+}
+
+/**
+ * Get the profile model badge text from a card
+ */
+export async function getProfileModel(
+  page: Page,
+  profileId: string
+): Promise<string> {
+  const card = await getProfileCard(page, profileId);
+  const modelBadge = card.locator(
+    'span[class*="border-primary"]:has-text("haiku"), span[class*="border-primary"]:has-text("sonnet"), span[class*="border-primary"]:has-text("opus")'
+  );
+  return await modelBadge.textContent().then((text) => text?.trim() || "");
+}
+
+/**
+ * Get the profile thinking level badge text from a card
+ */
+export async function getProfileThinkingLevel(
+  page: Page,
+  profileId: string
+): Promise<string | null> {
+  const card = await getProfileCard(page, profileId);
+  const thinkingBadge = card.locator('span[class*="border-amber-500"]');
+  const isVisible = await thinkingBadge.isVisible().catch(() => false);
+  if (!isVisible) return null;
+  return await thinkingBadge.textContent().then((text) => text?.trim() || "");
+}
+
+/**
+ * Check if a profile has the built-in badge
+ */
+export async function isBuiltInProfile(
+  page: Page,
+  profileId: string
+): Promise<boolean> {
+  const card = await getProfileCard(page, profileId);
+  const builtInBadge = card.locator('span:has-text("Built-in")');
+  return await builtInBadge.isVisible().catch(() => false);
+}
+
+/**
+ * Check if the edit button is visible for a profile
+ */
+export async function isEditButtonVisible(
+  page: Page,
+  profileId: string
+): Promise<boolean> {
+  const card = await getProfileCard(page, profileId);
+  // Hover over card to make buttons visible
+  await card.hover();
+  const editButton = await getByTestId(page, `edit-profile-${profileId}`);
+  // Wait for button to become visible after hover (handles CSS transition)
+  try {
+    await editButton.waitFor({ state: "visible", timeout: 2000 });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if the delete button is visible for a profile
+ */
+export async function isDeleteButtonVisible(
+  page: Page,
+  profileId: string
+): Promise<boolean> {
+  const card = await getProfileCard(page, profileId);
+  // Hover over card to make buttons visible
+  await card.hover();
+  const deleteButton = await getByTestId(page, `delete-profile-${profileId}`);
+  // Wait for button to become visible after hover (handles CSS transition)
+  try {
+    await deleteButton.waitFor({ state: "visible", timeout: 2000 });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// ============================================================================
+// Drag & Drop
+// ============================================================================
+
+/**
+ * Drag a profile from one position to another
+ * Uses the drag handle and dnd-kit library pattern
+ *
+ * Note: dnd-kit requires pointer events with specific timing for drag recognition.
+ * Manual mouse operations are needed because Playwright's dragTo doesn't work
+ * reliably with dnd-kit's pointer-based drag detection.
+ *
+ * @param fromIndex - 0-based index of the profile to drag
+ * @param toIndex - 0-based index of the target position
+ */
+export async function dragProfile(
+  page: Page,
+  fromIndex: number,
+  toIndex: number
+): Promise<void> {
+  // Get all profile cards
+  const cards = await page.locator('[data-testid^="profile-card-"]').all();
+
+  if (fromIndex >= cards.length || toIndex >= cards.length) {
+    throw new Error(
+      `Invalid drag indices: fromIndex=${fromIndex}, toIndex=${toIndex}, total=${cards.length}`
+    );
+  }
+
+  const fromCard = cards[fromIndex];
+  const toCard = cards[toIndex];
+
+  // Get the drag handle within the source card
+  const dragHandle = fromCard.locator('[data-testid^="profile-drag-handle-"]');
+
+  // Ensure drag handle is visible and ready
+  await dragHandle.waitFor({ state: "visible", timeout: 5000 });
+
+  // Get bounding boxes
+  const handleBox = await dragHandle.boundingBox();
+  const toBox = await toCard.boundingBox();
+
+  if (!handleBox || !toBox) {
+    throw new Error("Unable to get bounding boxes for drag operation");
+  }
+
+  // Start position (center of drag handle)
+  const startX = handleBox.x + handleBox.width / 2;
+  const startY = handleBox.y + handleBox.height / 2;
+
+  // End position (center of target card)
+  const endX = toBox.x + toBox.width / 2;
+  const endY = toBox.y + toBox.height / 2;
+
+  // Perform manual drag operation
+  // dnd-kit needs pointer events in a specific sequence
+  await page.mouse.move(startX, startY);
+  await page.mouse.down();
+
+  // dnd-kit requires a brief hold before recognizing the drag gesture
+  // This is a library requirement, not an arbitrary timeout
+  await page.waitForTimeout(150);
+
+  // Move to target in steps for smoother drag recognition
+  await page.mouse.move(endX, endY, { steps: 10 });
+
+  // Brief pause before drop
+  await page.waitForTimeout(100);
+
+  await page.mouse.up();
+
+  // Wait for reorder animation to complete
+  await page.waitForTimeout(200);
+}
+
+/**
+ * Get the current order of all profile IDs
+ * Returns array of profile IDs in display order
+ */
+export async function getProfileOrder(page: Page): Promise<string[]> {
+  const cards = await page.locator('[data-testid^="profile-card-"]').all();
+  const ids: string[] = [];
+
+  for (const card of cards) {
+    const testId = await card.getAttribute("data-testid");
+    if (testId) {
+      // Extract profile ID from data-testid="profile-card-{id}"
+      const profileId = testId.replace("profile-card-", "");
+      ids.push(profileId);
+    }
+  }
+
+  return ids;
+}
+
+// ============================================================================
+// Header Actions
+// ============================================================================
+
+/**
+ * Click the "Refresh Defaults" button
+ */
+export async function clickRefreshDefaults(page: Page): Promise<void> {
+  await clickElement(page, "refresh-profiles-button");
+}