style: fix formatting with Prettier

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

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

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

@@ -1,21 +1,20 @@
-
-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";
+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;
+  onSave: (profile: Omit<AIProfile, 'id'>) => void;
   onCancel: () => void;
   isEditing: boolean;
   hotkeyActive: boolean;
@@ -29,11 +28,11 @@ export function ProfileForm({
   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",
+    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);
@@ -48,7 +47,7 @@ export function ProfileForm({
 
   const handleSubmit = () => {
     if (!formData.name.trim()) {
-      toast.error("Please enter a profile name");
+      toast.error('Please enter a profile name');
       return;
     }
 
@@ -56,7 +55,7 @@ export function ProfileForm({
       name: formData.name.trim(),
       description: formData.description.trim(),
       model: formData.model,
-      thinkingLevel: supportsThinking ? formData.thinkingLevel : "none",
+      thinkingLevel: supportsThinking ? formData.thinkingLevel : 'none',
       provider,
       isBuiltIn: false,
       icon: formData.icon,
@@ -84,9 +83,7 @@ export function ProfileForm({
           <Textarea
             id="profile-description"
             value={formData.description}
-            onChange={(e) =>
-              setFormData({ ...formData, description: e.target.value })
-            }
+            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
             placeholder="Describe when to use this profile..."
             rows={2}
             data-testid="profile-description-input"
@@ -103,10 +100,10 @@ export function ProfileForm({
                 type="button"
                 onClick={() => setFormData({ ...formData, icon: name })}
                 className={cn(
-                  "w-10 h-10 rounded-lg flex items-center justify-center border transition-colors",
+                  '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"
+                    ? 'bg-primary text-primary-foreground border-primary'
+                    : 'bg-background hover:bg-accent border-border'
                 )}
                 data-testid={`icon-select-${name}`}
               >
@@ -129,14 +126,14 @@ export function ProfileForm({
                 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",
+                  '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"
+                    ? 'bg-primary text-primary-foreground border-primary'
+                    : 'bg-background hover:bg-accent border-border'
                 )}
                 data-testid={`model-select-${id}`}
               >
-                {label.replace("Claude ", "")}
+                {label.replace('Claude ', '')}
               </button>
             ))}
           </div>
@@ -156,19 +153,19 @@ export function ProfileForm({
                   type="button"
                   onClick={() => {
                     setFormData({ ...formData, thinkingLevel: id });
-                    if (id === "ultrathink") {
-                      toast.warning("Ultrathink uses extensive reasoning", {
+                    if (id === 'ultrathink') {
+                      toast.warning('Ultrathink uses extensive reasoning', {
                         description:
-                          "Best for complex architecture, migrations, or deep debugging (~$0.48/task).",
+                          '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",
+                    '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"
+                      ? 'bg-amber-500 text-white border-amber-400'
+                      : 'bg-background hover:bg-accent border-border'
                   )}
                   data-testid={`thinking-select-${id}`}
                 >
@@ -190,14 +187,13 @@ export function ProfileForm({
         </Button>
         <HotkeyButton
           onClick={handleSubmit}
-          hotkey={{ key: "Enter", cmdCtrl: true }}
+          hotkey={{ key: 'Enter', cmdCtrl: true }}
           hotkeyActive={hotkeyActive}
           data-testid="save-profile-button"
         >
-          {isEditing ? "Save Changes" : "Create Profile"}
+          {isEditing ? 'Save Changes' : 'Create Profile'}
         </HotkeyButton>
       </DialogFooter>
     </>
   );
 }
-

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

@@ -1,6 +1,6 @@
-import { Button } from "@/components/ui/button";
-import { HotkeyButton } from "@/components/ui/hotkey-button";
-import { UserCircle, Plus, RefreshCw } from "lucide-react";
+import { Button } from '@/components/ui/button';
+import { HotkeyButton } from '@/components/ui/hotkey-button';
+import { UserCircle, Plus, RefreshCw } from 'lucide-react';
 
 interface ProfilesHeaderProps {
   onResetProfiles: () => void;
@@ -22,9 +22,7 @@ export function ProfilesHeader({
               <UserCircle className="w-5 h-5 text-primary-foreground" />
             </div>
             <div>
-              <h1 className="text-2xl font-bold text-foreground">
-                AI Profiles
-              </h1>
+              <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>
@@ -55,4 +53,3 @@ export function ProfilesHeader({
     </div>
   );
 }
-

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

@@ -1,10 +1,10 @@
-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";
+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;
@@ -12,19 +12,10 @@ interface SortableProfileCardProps {
   onDelete: () => void;
 }
 
-export function SortableProfileCard({
-  profile,
-  onEdit,
-  onDelete,
-}: SortableProfileCardProps) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: profile.id });
+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),
@@ -39,11 +30,11 @@ export function SortableProfileCard({
       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",
+        '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"
+          ? 'border-border/50'
+          : 'border-border hover:border-primary/50 hover:shadow-sm'
       )}
       data-testid={`profile-card-${profile.id}`}
     >
@@ -60,12 +51,8 @@ export function SortableProfileCard({
       </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 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 */}
@@ -79,16 +66,12 @@ export function SortableProfileCard({
             </span>
           )}
         </div>
-        <p className="text-sm text-muted-foreground mt-0.5 line-clamp-2">
-          {profile.description}
-        </p>
+        <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"
-          >
+          <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" && (
+          {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>
@@ -124,4 +107,3 @@ export function SortableProfileCard({
     </div>
   );
 }
-

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

@@ -1,18 +1,8 @@
-import {
-  Brain,
-  Zap,
-  Scale,
-  Cpu,
-  Rocket,
-  Sparkles,
-} from "lucide-react";
-import type { AgentModel, ThinkingLevel } from "@/store/app-store";
+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 }>
-> = {
+export const PROFILE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
   Brain,
   Zap,
   Scale,
@@ -23,27 +13,25 @@ export const PROFILE_ICONS: Record<
 
 // 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 },
+  { 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" },
+  { 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" },
+  { id: 'none', label: 'None' },
+  { id: 'low', label: 'Low' },
+  { id: 'medium', label: 'Medium' },
+  { id: 'high', label: 'High' },
+  { id: 'ultrathink', label: 'Ultrathink' },
 ];
-
-

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

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