Merge main into worktree-confusion: resolve conflicts maintaining both sets of changes

apps/app/src/components/views/board-view/dialogs/edit-feature-dialog.tsx

@@ -23,6 +23,7 @@ import {
 import {
   MessageSquare,
   Settings2,
+  SlidersHorizontal,
   FlaskConical,
   Sparkles,
   ChevronDown,
@@ -37,6 +38,7 @@ import {
   ThinkingLevel,
   AIProfile,
   useAppStore,
+  PlanningMode,
 } from "@/store/app-store";
 import {
   ModelSelector,
@@ -45,6 +47,7 @@ import {
   TestingTabContent,
   PrioritySelector,
   BranchSelector,
+  PlanningModeSelector,
 } from "../shared";
 import {
   DropdownMenu,
@@ -69,6 +72,8 @@ interface EditFeatureDialogProps {
       imagePaths: DescriptionImagePath[];
       branchName: string; // Can be empty string to use current branch
       priority: number;
+      planningMode: PlanningMode;
+      requirePlanApproval: boolean;
     }
   ) => void;
   categorySuggestions: string[];
@@ -105,18 +110,22 @@ export function EditFeatureDialog({
     "improve" | "technical" | "simplify" | "acceptance"
   >("improve");
   const [showDependencyTree, setShowDependencyTree] = useState(false);
+  const [planningMode, setPlanningMode] = useState<PlanningMode>(feature?.planningMode ?? 'skip');
+  const [requirePlanApproval, setRequirePlanApproval] = useState(feature?.requirePlanApproval ?? false);
 
   // Get enhancement model and worktrees setting from store
   const { enhancementModel, useWorktrees } = useAppStore();
 
   useEffect(() => {
     setEditingFeature(feature);
-    if (!feature) {
-      setEditFeaturePreviewMap(new Map());
-      setShowEditAdvancedOptions(false);
-    } else {
+    if (feature) {
+      setPlanningMode(feature.planningMode ?? 'skip');
+      setRequirePlanApproval(feature.requirePlanApproval ?? false);
       // If feature has no branchName, default to using current branch
       setUseCurrentBranch(!feature.branchName);
+    } else {
+      setEditFeaturePreviewMap(new Map());
+      setShowEditAdvancedOptions(false);
     }
   }, [feature]);
 
@@ -158,6 +167,8 @@ export function EditFeatureDialog({
       imagePaths: editingFeature.imagePaths ?? [],
       branchName: finalBranchName,
       priority: editingFeature.priority ?? 2,
+      planningMode,
+      requirePlanApproval,
     };
 
     onUpdate(editingFeature.id, updates);
@@ -235,13 +246,13 @@ export function EditFeatureDialog({
       <DialogContent
         compact={!isMaximized}
         data-testid="edit-feature-dialog"
-        onPointerDownOutside={(e) => {
+        onPointerDownOutside={(e: CustomEvent) => {
           const target = e.target as HTMLElement;
           if (target.closest('[data-testid="category-autocomplete-list"]')) {
             e.preventDefault();
           }
         }}
-        onInteractOutside={(e) => {
+        onInteractOutside={(e: CustomEvent) => {
           const target = e.target as HTMLElement;
           if (target.closest('[data-testid="category-autocomplete-list"]')) {
             e.preventDefault();
@@ -265,9 +276,9 @@ export function EditFeatureDialog({
               <Settings2 className="w-4 h-4 mr-2" />
               Model
             </TabsTrigger>
-            <TabsTrigger value="testing" data-testid="edit-tab-testing">
-              <FlaskConical className="w-4 h-4 mr-2" />
-              Testing
+            <TabsTrigger value="options" data-testid="edit-tab-options">
+              <SlidersHorizontal className="w-4 h-4 mr-2" />
+              Options
             </TabsTrigger>
           </TabsList>
 
@@ -466,11 +477,22 @@ export function EditFeatureDialog({
             )}
           </TabsContent>
 
-          {/* Testing Tab */}
-          <TabsContent
-            value="testing"
-            className="space-y-4 overflow-y-auto cursor-default"
-          >
+          {/* Options Tab */}
+          <TabsContent value="options" className="space-y-4 overflow-y-auto cursor-default">
+            {/* Planning Mode Section */}
+            <PlanningModeSelector
+              mode={planningMode}
+              onModeChange={setPlanningMode}
+              requireApproval={requirePlanApproval}
+              onRequireApprovalChange={setRequirePlanApproval}
+              featureDescription={editingFeature.description}
+              testIdPrefix="edit-feature"
+              compact
+            />
+
+            <div className="border-t border-border my-4" />
+
+            {/* Testing Section */}
             <TestingTabContent
               skipTests={editingFeature.skipTests ?? false}
               onSkipTestsChange={(skipTests) =>