feat: enhance feature dialogs with planning mode tooltips

- Integrated Tooltip components into AddFeatureDialog, EditFeatureDialog, and MassEditDialog to provide user guidance on planning mode availability.
- Updated the rendering logic for planning mode selection to conditionally display tooltips when planning modes are not supported.
- Improved user experience by clarifying the conditions under which planning modes can be utilized.

apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx

@@ -53,6 +53,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import {
   getAncestors,
   formatAncestorContextForPrompt,
@@ -492,23 +493,44 @@ export function AddFeatureDialog({
               />
             </div>
 
-            <div
+            <div className="grid gap-3 grid-cols-2">
+              <div className="space-y-1.5">
+                <Label
                   className={cn(
-                'grid gap-3',
+                    'text-xs text-muted-foreground',
-                modelSupportsPlanningMode ? 'grid-cols-2' : 'grid-cols-1'
+                    !modelSupportsPlanningMode && 'opacity-50'
                   )}
                 >
-              {modelSupportsPlanningMode && (
+                  Planning
-                <div className="space-y-1.5">
+                </Label>
-                  <Label className="text-xs text-muted-foreground">Planning</Label>
+                {modelSupportsPlanningMode ? (
                   <PlanningModeSelect
                     mode={planningMode}
                     onModeChange={setPlanningMode}
                     testIdPrefix="add-feature-planning"
                     compact
                   />
+                ) : (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div>
+                          <PlanningModeSelect
+                            mode="skip"
+                            onModeChange={() => {}}
+                            testIdPrefix="add-feature-planning"
+                            compact
+                            disabled
+                          />
                         </div>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Planning modes are only available for Claude Provider</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 )}
+              </div>
               <div className="space-y-1.5">
                 <Label className="text-xs text-muted-foreground">Options</Label>
                 <div className="flex flex-col gap-2 pt-1">
@@ -526,20 +548,25 @@ export function AddFeatureDialog({
                       Run tests
                     </Label>
                   </div>
-                  {modelSupportsPlanningMode && (
                   <div className="flex items-center gap-2">
                     <Checkbox
                       id="add-feature-require-approval"
                       checked={requirePlanApproval}
                       onCheckedChange={(checked) => setRequirePlanApproval(!!checked)}
-                        disabled={planningMode === 'skip' || planningMode === 'lite'}
+                      disabled={
+                        !modelSupportsPlanningMode ||
+                        planningMode === 'skip' ||
+                        planningMode === 'lite'
+                      }
                       data-testid="add-feature-require-approval-checkbox"
                     />
                     <Label
                       htmlFor="add-feature-require-approval"
                       className={cn(
                         'text-xs font-normal',
-                          planningMode === 'skip' || planningMode === 'lite'
+                        !modelSupportsPlanningMode ||
+                          planningMode === 'skip' ||
+                          planningMode === 'lite'
                           ? 'cursor-not-allowed text-muted-foreground'
                           : 'cursor-pointer'
                       )}
@@ -547,7 +574,6 @@ export function AddFeatureDialog({
                       Require approval
                     </Label>
                   </div>
-                  )}
                 </div>
               </div>
             </div>

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

@@ -52,6 +52,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { DependencyTreeDialog } from './dependency-tree-dialog';
 import { isClaudeModel, supportsReasoningEffort } from '@automaker/types';
 
@@ -516,23 +517,44 @@ export function EditFeatureDialog({
               />
             </div>
 
-            <div
+            <div className="grid gap-3 grid-cols-2">
+              <div className="space-y-1.5">
+                <Label
                   className={cn(
-                'grid gap-3',
+                    'text-xs text-muted-foreground',
-                modelSupportsPlanningMode ? 'grid-cols-2' : 'grid-cols-1'
+                    !modelSupportsPlanningMode && 'opacity-50'
                   )}
                 >
-              {modelSupportsPlanningMode && (
+                  Planning
-                <div className="space-y-1.5">
+                </Label>
-                  <Label className="text-xs text-muted-foreground">Planning</Label>
+                {modelSupportsPlanningMode ? (
                   <PlanningModeSelect
                     mode={planningMode}
                     onModeChange={setPlanningMode}
                     testIdPrefix="edit-feature-planning"
                     compact
                   />
+                ) : (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div>
+                          <PlanningModeSelect
+                            mode="skip"
+                            onModeChange={() => {}}
+                            testIdPrefix="edit-feature-planning"
+                            compact
+                            disabled
+                          />
                         </div>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Planning modes are only available for Claude Provider</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 )}
+              </div>
               <div className="space-y-1.5">
                 <Label className="text-xs text-muted-foreground">Options</Label>
                 <div className="flex flex-col gap-2 pt-1">
@@ -552,20 +574,25 @@ export function EditFeatureDialog({
                       Run tests
                     </Label>
                   </div>
-                  {modelSupportsPlanningMode && (
                   <div className="flex items-center gap-2">
                     <Checkbox
                       id="edit-feature-require-approval"
                       checked={requirePlanApproval}
                       onCheckedChange={(checked) => setRequirePlanApproval(!!checked)}
-                        disabled={planningMode === 'skip' || planningMode === 'lite'}
+                      disabled={
+                        !modelSupportsPlanningMode ||
+                        planningMode === 'skip' ||
+                        planningMode === 'lite'
+                      }
                       data-testid="edit-feature-require-approval-checkbox"
                     />
                     <Label
                       htmlFor="edit-feature-require-approval"
                       className={cn(
                         'text-xs font-normal',
-                          planningMode === 'skip' || planningMode === 'lite'
+                        !modelSupportsPlanningMode ||
+                          planningMode === 'skip' ||
+                          planningMode === 'lite'
                           ? 'cursor-not-allowed text-muted-foreground'
                           : 'cursor-pointer'
                       )}
@@ -573,7 +600,6 @@ export function EditFeatureDialog({
                       Require approval
                     </Label>
                   </div>
-                  )}
                 </div>
               </div>
             </div>

apps/ui/src/components/views/board-view/dialogs/mass-edit-dialog.tsx

@@ -15,8 +15,9 @@ import { modelSupportsThinking } from '@/lib/utils';
 import { Feature, ModelAlias, ThinkingLevel, PlanningMode } from '@/store/app-store';
 import { TestingTabContent, PrioritySelect, PlanningModeSelect } from '../shared';
 import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
-import { isCursorModel, type PhaseModelEntry } from '@automaker/types';
+import { isCursorModel, isClaudeModel, type PhaseModelEntry } from '@automaker/types';
 import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 interface MassEditDialogProps {
   open: boolean;
@@ -167,6 +168,7 @@ export function MassEditDialog({ open, onClose, selectedFeatures, onApply }: Mas
   const hasAnyApply = Object.values(applyState).some(Boolean);
   const isCurrentModelCursor = isCursorModel(model);
   const modelAllowsThinking = !isCurrentModelCursor && modelSupportsThinking(model);
+  const modelSupportsPlanningMode = isClaudeModel(model);
 
   return (
     <Dialog open={open} onOpenChange={(open) => !open && onClose()}>
@@ -205,6 +207,7 @@ export function MassEditDialog({ open, onClose, selectedFeatures, onApply }: Mas
           <div className="border-t border-border" />
 
           {/* Planning Mode */}
+          {modelSupportsPlanningMode ? (
             <FieldWrapper
               label="Planning Mode"
               isMixed={mixedValues.planningMode || mixedValues.requirePlanApproval}
@@ -229,6 +232,39 @@ export function MassEditDialog({ open, onClose, selectedFeatures, onApply }: Mas
                 testIdPrefix="mass-edit-planning"
               />
             </FieldWrapper>
+          ) : (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div
+                    className={cn(
+                      'p-3 rounded-lg border transition-colors border-border bg-muted/20 opacity-50 cursor-not-allowed'
+                    )}
+                  >
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center gap-2">
+                        <Checkbox checked={false} disabled className="opacity-50" />
+                        <Label className="text-sm font-medium text-muted-foreground">
+                          Planning Mode
+                        </Label>
+                      </div>
+                    </div>
+                    <div className="opacity-50 pointer-events-none">
+                      <PlanningModeSelect
+                        mode="skip"
+                        onModeChange={() => {}}
+                        testIdPrefix="mass-edit-planning"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Planning modes are only available for Claude Provider</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
 
           {/* Priority */}
           <FieldWrapper