feat: integrate planning mode functionality across components

- Added a new PlanningMode feature to manage default planning strategies for features. - Updated the FeatureDefaultsSection to include a dropdown for selecting the default planning mode. - Enhanced AddFeatureDialog and EditFeatureDialog to support planning mode selection and state management. - Introduced PlanningModeSelector component for better user interaction with planning modes. - Updated app state management to include default planning mode and related specifications. - Refactored various UI components to ensure compatibility with new planning mode features.
2026-02-01 20:23:36 +00:00 · 2025-12-16 23:13:06 -05:00
parent e8e79d8446
commit 01098545cf
19 changed files with 1810 additions and 664 deletions
--- a/apps/app/src/components/views/board-view/dialogs/add-feature-dialog.tsx
+++ b/apps/app/src/components/views/board-view/dialogs/add-feature-dialog.tsx
@@ -19,7 +19,7 @@ import {
  FeatureImagePath as DescriptionImagePath,
  ImagePreviewMap,
 } from "@/components/ui/description-image-dropzone";
-import { MessageSquare, Settings2, FlaskConical, Sparkles, ChevronDown } from "lucide-react";
+import { MessageSquare, Settings2, SlidersHorizontal, Sparkles, ChevronDown } from "lucide-react";
 import { toast } from "sonner";
 import { getElectronAPI } from "@/lib/electron";
 import { modelSupportsThinking } from "@/lib/utils";
@@ -29,6 +29,7 @@ import {
  ThinkingLevel,
  FeatureImage,
  AIProfile,
+  PlanningMode,
 } from "@/store/app-store";
 import {
  ModelSelector,
@@ -36,6 +37,7 @@ import {
  ProfileQuickSelect,
  TestingTabContent,
  PrioritySelector,
+  PlanningModeSelector,
 } from "../shared";
 import {
  DropdownMenu,
@@ -57,6 +59,7 @@ interface AddFeatureDialogProps {
    model: AgentModel;
    thinkingLevel: ThinkingLevel;
    priority: number;
+    planningMode: PlanningMode;
  }) => void;
  categorySuggestions: string[];
  defaultSkipTests: boolean;
@@ -92,19 +95,21 @@ export function AddFeatureDialog({
  const [descriptionError, setDescriptionError] = useState(false);
  const [isEnhancing, setIsEnhancing] = useState(false);
  const [enhancementMode, setEnhancementMode] = useState<'improve' | 'technical' | 'simplify' | 'acceptance'>('improve');
+  const [planningMode, setPlanningMode] = useState<PlanningMode>('skip');

-  // Get enhancement model from store
-  const { enhancementModel } = useAppStore();
+  // Get enhancement model and default planning mode from store
+  const { enhancementModel, defaultPlanningMode } = useAppStore();

-  // Sync skipTests default when dialog opens
+  // Sync defaults when dialog opens
  useEffect(() => {
    if (open) {
      setNewFeature((prev) => ({
        ...prev,
        skipTests: defaultSkipTests,
      }));
+      setPlanningMode(defaultPlanningMode);
    }
-  }, [open, defaultSkipTests]);
+  }, [open, defaultSkipTests, defaultPlanningMode]);

  const handleAdd = () => {
    if (!newFeature.description.trim()) {
@@ -128,6 +133,7 @@ export function AddFeatureDialog({
      model: selectedModel,
      thinkingLevel: normalizedThinking,
      priority: newFeature.priority,
+      planningMode,
    });

    // Reset form
@@ -142,6 +148,7 @@ export function AddFeatureDialog({
      priority: 2,
      thinkingLevel: "none",
    });
+    setPlanningMode(defaultPlanningMode);
    setNewFeaturePreviewMap(new Map());
    setShowAdvancedOptions(false);
    setDescriptionError(false);
@@ -209,13 +216,13 @@ export function AddFeatureDialog({
      <DialogContent
        compact={!isMaximized}
        data-testid="add-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();
@@ -241,9 +248,9 @@ export function AddFeatureDialog({
              <Settings2 className="w-4 h-4 mr-2" />
              Model
            </TabsTrigger>
-            <TabsTrigger value="testing" data-testid="tab-testing">
-              <FlaskConical className="w-4 h-4 mr-2" />
-              Testing
+            <TabsTrigger value="options" data-testid="tab-options">
+              <SlidersHorizontal className="w-4 h-4 mr-2" />
+              Options
            </TabsTrigger>
          </TabsList>

@@ -395,8 +402,20 @@ export function AddFeatureDialog({
            )}
          </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}
+              featureDescription={newFeature.description}
+              testIdPrefix="add-feature"
+              compact
+            />
+
+            <div className="border-t border-border my-4" />
+
+            {/* Testing Section */}
            <TestingTabContent
              skipTests={newFeature.skipTests}
              onSkipTestsChange={(skipTests) =>
--- a/apps/app/src/components/views/board-view/dialogs/edit-feature-dialog.tsx
+++ b/apps/app/src/components/views/board-view/dialogs/edit-feature-dialog.tsx
@@ -19,7 +19,7 @@ import {
  FeatureImagePath as DescriptionImagePath,
  ImagePreviewMap,
 } from "@/components/ui/description-image-dropzone";
-import { MessageSquare, Settings2, FlaskConical, Sparkles, ChevronDown, GitBranch } from "lucide-react";
+import { MessageSquare, Settings2, SlidersHorizontal, Sparkles, ChevronDown, GitBranch } from "lucide-react";
 import { toast } from "sonner";
 import { getElectronAPI } from "@/lib/electron";
 import { modelSupportsThinking } from "@/lib/utils";
@@ -29,6 +29,7 @@ import {
  ThinkingLevel,
  AIProfile,
  useAppStore,
+  PlanningMode,
 } from "@/store/app-store";
 import {
  ModelSelector,
@@ -36,6 +37,7 @@ import {
  ProfileQuickSelect,
  TestingTabContent,
  PrioritySelector,
+  PlanningModeSelector,
 } from "../shared";
 import {
  DropdownMenu,
@@ -59,6 +61,7 @@ interface EditFeatureDialogProps {
      thinkingLevel: ThinkingLevel;
      imagePaths: DescriptionImagePath[];
      priority: number;
+      planningMode: PlanningMode;
    }
  ) => void;
  categorySuggestions: string[];
@@ -85,13 +88,16 @@ export function EditFeatureDialog({
  const [isEnhancing, setIsEnhancing] = useState(false);
  const [enhancementMode, setEnhancementMode] = useState<'improve' | 'technical' | 'simplify' | 'acceptance'>('improve');
  const [showDependencyTree, setShowDependencyTree] = useState(false);
+  const [planningMode, setPlanningMode] = useState<PlanningMode>(feature?.planningMode ?? 'skip');

  // Get enhancement model from store
  const { enhancementModel } = useAppStore();

  useEffect(() => {
    setEditingFeature(feature);
-    if (!feature) {
+    if (feature) {
+      setPlanningMode(feature.planningMode ?? 'skip');
+    } else {
      setEditFeaturePreviewMap(new Map());
      setShowEditAdvancedOptions(false);
    }
@@ -114,6 +120,7 @@ export function EditFeatureDialog({
      thinkingLevel: normalizedThinking,
      imagePaths: editingFeature.imagePaths ?? [],
      priority: editingFeature.priority ?? 2,
+      planningMode,
    };

    onUpdate(editingFeature.id, updates);
@@ -186,13 +193,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();
@@ -216,9 +223,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>

@@ -381,8 +388,20 @@ 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}
+              featureDescription={editingFeature.description}
+              testIdPrefix="edit-feature"
+              compact
+            />
+
+            <div className="border-t border-border my-4" />
+
+            {/* Testing Section */}
            <TestingTabContent
              skipTests={editingFeature.skipTests ?? false}
              onSkipTestsChange={(skipTests) =>
--- a/apps/app/src/components/views/board-view/dialogs/follow-up-dialog.tsx
+++ b/apps/app/src/components/views/board-view/dialogs/follow-up-dialog.tsx
@@ -58,7 +58,7 @@ export function FollowUpDialog({
      <DialogContent
        compact={!isMaximized}
        data-testid="follow-up-dialog"
-        onKeyDown={(e) => {
+        onKeyDown={(e: React.KeyboardEvent) => {
          if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && prompt.trim()) {
            e.preventDefault();
            onSend();
--- a/apps/app/src/components/views/board-view/shared/index.ts
+++ b/apps/app/src/components/views/board-view/shared/index.ts
@@ -4,3 +4,4 @@ export * from "./thinking-level-selector";
 export * from "./profile-quick-select";
 export * from "./testing-tab-content";
 export * from "./priority-selector";
+export * from "./planning-mode-selector";
--- a/apps/app/src/components/views/board-view/shared/planning-mode-selector.tsx
+++ b/apps/app/src/components/views/board-view/shared/planning-mode-selector.tsx
@@ -0,0 +1,327 @@
+"use client";
+
+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 { cn } from "@/lib/utils";
+
+export type PlanningMode = 'skip' | 'lite' | 'spec' | 'full';
+
+export interface PlanSpec {
+  status: 'pending' | 'generating' | 'generated' | 'approved' | 'rejected';
+  content?: string;
+  version: number;
+  generatedAt?: string;
+  approvedAt?: string;
+  reviewedByUser: boolean;
+  tasksCompleted?: number;
+  tasksTotal?: number;
+}
+
+interface PlanningModeSelectorProps {
+  mode: PlanningMode;
+  onModeChange: (mode: PlanningMode) => void;
+  planSpec?: PlanSpec;
+  onGenerateSpec?: () => void;
+  onApproveSpec?: () => void;
+  onRejectSpec?: () => void;
+  onViewSpec?: () => void;
+  isGenerating?: boolean;
+  featureDescription?: string; // For auto-generation context
+  testIdPrefix?: string;
+  compact?: boolean; // For use in dialogs vs settings
+}
+
+const modes = [
+  {
+    value: 'skip' as const,
+    label: 'Skip',
+    description: 'Direct implementation, no upfront planning',
+    icon: Zap,
+    color: 'text-emerald-500',
+    bgColor: 'bg-emerald-500/10',
+    borderColor: 'border-emerald-500/30',
+    badge: 'Default',
+  },
+  {
+    value: 'lite' as const,
+    label: 'Lite',
+    description: 'Think through approach, create task list',
+    icon: ClipboardList,
+    color: 'text-blue-500',
+    bgColor: 'bg-blue-500/10',
+    borderColor: 'border-blue-500/30',
+  },
+  {
+    value: 'spec' as const,
+    label: 'Spec',
+    description: 'Generate spec with acceptance criteria',
+    icon: FileText,
+    color: 'text-purple-500',
+    bgColor: 'bg-purple-500/10',
+    borderColor: 'border-purple-500/30',
+    badge: 'Approval Required',
+  },
+  {
+    value: 'full' as const,
+    label: 'Full',
+    description: 'Comprehensive spec with phased plan',
+    icon: ScrollText,
+    color: 'text-amber-500',
+    bgColor: 'bg-amber-500/10',
+    borderColor: 'border-amber-500/30',
+    badge: 'Approval Required',
+  },
+];
+
+export function PlanningModeSelector({
+  mode,
+  onModeChange,
+  planSpec,
+  onGenerateSpec,
+  onApproveSpec,
+  onRejectSpec,
+  onViewSpec,
+  isGenerating = false,
+  featureDescription,
+  testIdPrefix = 'planning',
+  compact = false,
+}: PlanningModeSelectorProps) {
+  const [showPreview, setShowPreview] = useState(false);
+  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;
+
+  return (
+    <div className="space-y-4">
+      {/* 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>
+          <div>
+            <Label className="text-sm font-medium">Planning Mode</Label>
+            <p className="text-xs text-muted-foreground">
+              Choose how much upfront planning before implementation
+            </p>
+          </div>
+        </div>
+
+        {/* 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"
+            >
+              <Eye className="h-3.5 w-3.5 mr-1" />
+              View
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* Mode Selection Cards */}
+      <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;
+          return (
+            <button
+              key={m.value}
+              type="button"
+              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",
+                isSelected
+                  ? 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>
+              <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"
+                  )}>
+                    {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"
+                    )}>
+                      {m.badge === 'Default' ? 'Default' : 'Review'}
+                    </span>
+                  )}
+                </div>
+                {!compact && (
+                  <p className="text-[10px] text-muted-foreground mt-0.5 line-clamp-2">
+                    {m.description}
+                  </p>
+                )}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* 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="p-4 space-y-3">
+            {/* Status indicator */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                {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>
+                  </>
+                ) : planSpec?.status === 'approved' ? (
+                  <>
+                    <Check className="h-4 w-4 text-emerald-500" />
+                    <span className="text-sm text-emerald-500 font-medium">Spec Approved</span>
+                  </>
+                ) : 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>
+                  </>
+                ) : (
+                  <>
+                    <Sparkles className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm text-muted-foreground">
+                      Spec will be generated when feature starts
+                    </span>
+                  </>
+                )}
+              </div>
+
+              {/* Auto-generate toggle area */}
+              {!planSpec?.status && canGenerate && onGenerateSpec && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={onGenerateSpec}
+                  disabled={isGenerating}
+                  className="h-7"
+                >
+                  <Sparkles className="h-3.5 w-3.5 mr-1" />
+                  Pre-generate
+                </Button>
+              )}
+            </div>
+
+            {/* Spec content preview */}
+            {hasSpec && (
+              <div className="space-y-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowPreview(!showPreview)}
+                  className="w-full justify-between h-8 px-2"
+                >
+                  <span className="text-xs text-muted-foreground">
+                    {showPreview ? 'Hide Preview' : 'Show Preview'}
+                  </span>
+                  <Eye className="h-3.5 w-3.5" />
+                </Button>
+
+                {showPreview && (
+                  <div className="rounded-lg bg-background/80 border border-border/50 p-3 max-h-48 overflow-y-auto">
+                    <pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono">
+                      {planSpec.content}
+                    </pre>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* 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"
+                >
+                  Request Changes
+                </Button>
+                <Button
+                  size="sm"
+                  onClick={onApproveSpec}
+                  className="flex-1 bg-emerald-500 hover:bg-emerald-600 text-white"
+                >
+                  <Check className="h-3.5 w-3.5 mr-1" />
+                  Approve Spec
+                </Button>
+              </div>
+            )}
+
+            {/* 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"
+                >
+                  <RefreshCw className="h-3.5 w-3.5 mr-1" />
+                  Regenerate
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Info text for non-approval modes */}
+      {!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 create a planning outline before implementing, but won't wait for approval."}
+        </p>
+      )}
+    </div>
+  );
+}
--- a/apps/app/src/components/views/settings-view.tsx
+++ b/apps/app/src/components/views/settings-view.tsx
@@ -38,6 +38,8 @@ export function SettingsView() {
    setMuteDoneSound,
    currentProject,
    moveProjectToTrash,
+    defaultPlanningMode,
+    setDefaultPlanningMode,
  } = useAppStore();

  // Convert electron Project to settings-view Project type
@@ -119,9 +121,11 @@ export function SettingsView() {
            showProfilesOnly={showProfilesOnly}
            defaultSkipTests={defaultSkipTests}
            useWorktrees={useWorktrees}
+            defaultPlanningMode={defaultPlanningMode}
            onShowProfilesOnlyChange={setShowProfilesOnly}
            onDefaultSkipTestsChange={setDefaultSkipTests}
            onUseWorktreesChange={setUseWorktrees}
+            onDefaultPlanningModeChange={setDefaultPlanningMode}
          />
        );
      case "danger":
--- a/apps/app/src/components/views/settings-view/feature-defaults/feature-defaults-section.tsx
+++ b/apps/app/src/components/views/settings-view/feature-defaults/feature-defaults-section.tsx
@@ -1,24 +1,40 @@
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
-import { FlaskConical, Settings2, TestTube, GitBranch } from "lucide-react";
+import {
+  FlaskConical, Settings2, TestTube, GitBranch,
+  Zap, ClipboardList, FileText, ScrollText
+} from "lucide-react";
 import { cn } from "@/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+type PlanningMode = 'skip' | 'lite' | 'spec' | 'full';

 interface FeatureDefaultsSectionProps {
  showProfilesOnly: boolean;
  defaultSkipTests: boolean;
  useWorktrees: boolean;
+  defaultPlanningMode: PlanningMode;
  onShowProfilesOnlyChange: (value: boolean) => void;
  onDefaultSkipTestsChange: (value: boolean) => void;
  onUseWorktreesChange: (value: boolean) => void;
+  onDefaultPlanningModeChange: (value: PlanningMode) => void;
 }

 export function FeatureDefaultsSection({
  showProfilesOnly,
  defaultSkipTests,
  useWorktrees,
+  defaultPlanningMode,
  onShowProfilesOnlyChange,
  onDefaultSkipTestsChange,
  onUseWorktreesChange,
+  onDefaultPlanningModeChange,
 }: FeatureDefaultsSectionProps) {
  return (
    <div
@@ -43,6 +59,76 @@ export function FeatureDefaultsSection({
        </p>
      </div>
      <div className="p-6 space-y-5">
+        {/* Planning Mode Default */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <div className={cn(
+            "w-10 h-10 mt-0.5 rounded-xl flex items-center justify-center shrink-0",
+            defaultPlanningMode === 'skip' ? "bg-emerald-500/10" :
+            defaultPlanningMode === 'lite' ? "bg-blue-500/10" :
+            defaultPlanningMode === 'spec' ? "bg-purple-500/10" :
+            "bg-amber-500/10"
+          )}>
+            {defaultPlanningMode === 'skip' && <Zap className="w-5 h-5 text-emerald-500" />}
+            {defaultPlanningMode === 'lite' && <ClipboardList className="w-5 h-5 text-blue-500" />}
+            {defaultPlanningMode === 'spec' && <FileText className="w-5 h-5 text-purple-500" />}
+            {defaultPlanningMode === 'full' && <ScrollText className="w-5 h-5 text-amber-500" />}
+          </div>
+          <div className="flex-1 space-y-2">
+            <div className="flex items-center justify-between">
+              <Label className="text-foreground font-medium">
+                Default Planning Mode
+              </Label>
+              <Select
+                value={defaultPlanningMode}
+                onValueChange={(v: string) => onDefaultPlanningModeChange(v as PlanningMode)}
+              >
+                <SelectTrigger
+                  className="w-[160px] h-8"
+                  data-testid="default-planning-mode-select"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="skip">
+                    <div className="flex items-center gap-2">
+                      <Zap className="h-3.5 w-3.5 text-emerald-500" />
+                      <span>Skip</span>
+                      <span className="text-[10px] text-muted-foreground">(Default)</span>
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="lite">
+                    <div className="flex items-center gap-2">
+                      <ClipboardList className="h-3.5 w-3.5 text-blue-500" />
+                      <span>Lite Planning</span>
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="spec">
+                    <div className="flex items-center gap-2">
+                      <FileText className="h-3.5 w-3.5 text-purple-500" />
+                      <span>Spec (Lite SDD)</span>
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="full">
+                    <div className="flex items-center gap-2">
+                      <ScrollText className="h-3.5 w-3.5 text-amber-500" />
+                      <span>Full (SDD)</span>
+                    </div>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              {defaultPlanningMode === 'skip' && "Jump straight to implementation without upfront planning."}
+              {defaultPlanningMode === 'lite' && "Create a quick planning outline with tasks before building."}
+              {defaultPlanningMode === 'spec' && "Generate a specification with acceptance criteria for approval."}
+              {defaultPlanningMode === 'full' && "Create comprehensive spec with phased implementation plan."}
+            </p>
+          </div>
+        </div>
+
+        {/* Separator */}
+        <div className="border-t border-border/30" />
+
        {/* Profiles Only Setting */}
        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
          <Checkbox