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/board-view/shared/planning-mode-selector.tsx

@@ -1,20 +1,27 @@
-"use client";
+'use client';
 
-import { useState } from "react";
+import { useState } from 'react';
 import {
-  Zap, ClipboardList, FileText, ScrollText,
-  Loader2, Check, Eye, RefreshCw, Sparkles
-} from "lucide-react";
-import { Label } from "@/components/ui/label";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { cn } from "@/lib/utils";
-import type { PlanSpec } from "@/store/app-store";
+  Zap,
+  ClipboardList,
+  FileText,
+  ScrollText,
+  Loader2,
+  Check,
+  Eye,
+  RefreshCw,
+  Sparkles,
+} from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { cn } from '@/lib/utils';
+import type { PlanSpec } from '@/store/app-store';
 
 export type PlanningMode = 'skip' | 'lite' | 'spec' | 'full';
 
 // Re-export for backwards compatibility
-export type { ParsedTask, PlanSpec } from "@/store/app-store";
+export type { ParsedTask, PlanSpec } from '@/store/app-store';
 
 interface PlanningModeSelectorProps {
   mode: PlanningMode;
@@ -90,7 +97,7 @@ export function PlanningModeSelector({
   compact = false,
 }: PlanningModeSelectorProps) {
   const [showPreview, setShowPreview] = useState(false);
-  const selectedMode = modes.find(m => m.value === mode);
+  const selectedMode = modes.find((m) => m.value === mode);
   const requiresApproval = mode === 'spec' || mode === 'full';
   const canGenerate = requiresApproval && featureDescription?.trim() && !isGenerating;
   const hasSpec = planSpec && planSpec.content;
@@ -100,11 +107,13 @@ export function PlanningModeSelector({
       {/* Header with icon */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <div className={cn(
-            "w-8 h-8 rounded-lg flex items-center justify-center",
-            selectedMode?.bgColor || "bg-muted"
-          )}>
-            {selectedMode && <selectedMode.icon className={cn("h-4 w-4", selectedMode.color)} />}
+          <div
+            className={cn(
+              'w-8 h-8 rounded-lg flex items-center justify-center',
+              selectedMode?.bgColor || 'bg-muted'
+            )}
+          >
+            {selectedMode && <selectedMode.icon className={cn('h-4 w-4', selectedMode.color)} />}
           </div>
           <div>
             <Label className="text-sm font-medium">Planning Mode</Label>
@@ -117,12 +126,7 @@ export function PlanningModeSelector({
         {/* Quick action buttons when spec/full mode */}
         {requiresApproval && hasSpec && (
           <div className="flex items-center gap-2">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={onViewSpec}
-              className="h-7 px-2"
-            >
+            <Button variant="ghost" size="sm" onClick={onViewSpec} className="h-7 px-2">
               <Eye className="h-3.5 w-3.5 mr-1" />
               View
             </Button>
@@ -131,12 +135,7 @@ export function PlanningModeSelector({
       </div>
 
       {/* Mode Selection Cards */}
-      <div
-        className={cn(
-          "grid gap-2",
-          compact ? "grid-cols-2" : "grid-cols-2 sm:grid-cols-4"
-        )}
-      >
+      <div className={cn('grid gap-2', compact ? 'grid-cols-2' : 'grid-cols-2 sm:grid-cols-4')}>
         {modes.map((m) => {
           const isSelected = mode === m.value;
           const Icon = m.icon;
@@ -147,37 +146,45 @@ export function PlanningModeSelector({
               onClick={() => onModeChange(m.value)}
               data-testid={`${testIdPrefix}-mode-${m.value}`}
               className={cn(
-                "flex flex-col items-center gap-2 p-3 rounded-xl cursor-pointer transition-all duration-200",
-                "border-2 hover:border-primary/50",
+                'flex flex-col items-center gap-2 p-3 rounded-xl cursor-pointer transition-all duration-200',
+                'border-2 hover:border-primary/50',
                 isSelected
-                  ? cn("border-primary", m.bgColor)
-                  : "border-border/50 bg-card/50 hover:bg-accent/30"
+                  ? cn('border-primary', m.bgColor)
+                  : 'border-border/50 bg-card/50 hover:bg-accent/30'
               )}
             >
-              <div className={cn(
-                "w-10 h-10 rounded-full flex items-center justify-center transition-colors",
-                isSelected ? m.bgColor : "bg-muted"
-              )}>
-                <Icon className={cn(
-                  "h-5 w-5 transition-colors",
-                  isSelected ? m.color : "text-muted-foreground"
-                )} />
+              <div
+                className={cn(
+                  'w-10 h-10 rounded-full flex items-center justify-center transition-colors',
+                  isSelected ? m.bgColor : 'bg-muted'
+                )}
+              >
+                <Icon
+                  className={cn(
+                    'h-5 w-5 transition-colors',
+                    isSelected ? m.color : 'text-muted-foreground'
+                  )}
+                />
               </div>
               <div className="text-center">
                 <div className="flex items-center justify-center gap-1">
-                  <span className={cn(
-                    "font-medium text-sm",
-                    isSelected ? "text-foreground" : "text-muted-foreground"
-                  )}>
+                  <span
+                    className={cn(
+                      'font-medium text-sm',
+                      isSelected ? 'text-foreground' : 'text-muted-foreground'
+                    )}
+                  >
                     {m.label}
                   </span>
                   {m.badge && (
-                    <span className={cn(
-                      "text-[9px] px-1 py-0.5 rounded font-medium",
-                      m.badge === 'Default'
-                        ? "bg-emerald-500/15 text-emerald-500"
-                        : "bg-amber-500/15 text-amber-500"
-                    )}>
+                    <span
+                      className={cn(
+                        'text-[9px] px-1 py-0.5 rounded font-medium',
+                        m.badge === 'Default'
+                          ? 'bg-emerald-500/15 text-emerald-500'
+                          : 'bg-amber-500/15 text-amber-500'
+                      )}
+                    >
                       {m.badge === 'Default' ? 'Default' : 'Review'}
                     </span>
                   )}
@@ -213,14 +220,16 @@ export function PlanningModeSelector({
 
       {/* Spec Preview/Actions Panel - Only for spec/full modes */}
       {requiresApproval && (
-        <div className={cn(
-          "rounded-xl border transition-all duration-300",
-          planSpec?.status === 'approved'
-            ? "border-emerald-500/30 bg-emerald-500/5"
-            : planSpec?.status === 'generated'
-            ? "border-amber-500/30 bg-amber-500/5"
-            : "border-border/50 bg-muted/30"
-        )}>
+        <div
+          className={cn(
+            'rounded-xl border transition-all duration-300',
+            planSpec?.status === 'approved'
+              ? 'border-emerald-500/30 bg-emerald-500/5'
+              : planSpec?.status === 'generated'
+                ? 'border-amber-500/30 bg-amber-500/5'
+                : 'border-border/50 bg-muted/30'
+          )}
+        >
           <div className="p-4 space-y-3">
             {/* Status indicator */}
             <div className="flex items-center justify-between">
@@ -228,7 +237,9 @@ export function PlanningModeSelector({
                 {isGenerating ? (
                   <>
                     <Loader2 className="h-4 w-4 animate-spin text-primary" />
-                    <span className="text-sm text-muted-foreground">Generating {mode === 'full' ? 'comprehensive spec' : 'spec'}...</span>
+                    <span className="text-sm text-muted-foreground">
+                      Generating {mode === 'full' ? 'comprehensive spec' : 'spec'}...
+                    </span>
                   </>
                 ) : planSpec?.status === 'approved' ? (
                   <>
@@ -238,7 +249,9 @@ export function PlanningModeSelector({
                 ) : planSpec?.status === 'generated' ? (
                   <>
                     <Eye className="h-4 w-4 text-amber-500" />
-                    <span className="text-sm text-amber-500 font-medium">Spec Ready for Review</span>
+                    <span className="text-sm text-amber-500 font-medium">
+                      Spec Ready for Review
+                    </span>
                   </>
                 ) : (
                   <>
@@ -293,12 +306,7 @@ export function PlanningModeSelector({
             {/* Action buttons when spec is generated */}
             {planSpec?.status === 'generated' && (
               <div className="flex items-center gap-2 pt-2 border-t border-border/30">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={onRejectSpec}
-                  className="flex-1"
-                >
+                <Button variant="outline" size="sm" onClick={onRejectSpec} className="flex-1">
                   Request Changes
                 </Button>
                 <Button
@@ -315,12 +323,7 @@ export function PlanningModeSelector({
             {/* Regenerate option when approved */}
             {planSpec?.status === 'approved' && onGenerateSpec && (
               <div className="flex items-center justify-end pt-2 border-t border-border/30">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={onGenerateSpec}
-                  className="h-7"
-                >
+                <Button variant="ghost" size="sm" onClick={onGenerateSpec} className="h-7">
                   <RefreshCw className="h-3.5 w-3.5 mr-1" />
                   Regenerate
                 </Button>
@@ -334,7 +337,7 @@ export function PlanningModeSelector({
       {!requiresApproval && (
         <p className="text-xs text-muted-foreground bg-muted/30 rounded-lg p-3">
           {mode === 'skip'
-            ? "The agent will start implementing immediately without creating a plan or spec."
+            ? 'The agent will start implementing immediately without creating a plan or spec.'
             : "The agent will create a planning outline before implementing, but won't wait for approval."}
         </p>
       )}