Merge remote-tracking branch 'origin/v0.14.0rc' into feature/v0.14.0rc-1768981415660-tt2v

# Conflicts:
#	apps/ui/src/components/views/project-settings-view/config/navigation.ts
#	apps/ui/src/components/views/project-settings-view/hooks/use-project-settings-view.ts

apps/ui/src/components/views/project-settings-view/config/navigation.ts

@@ -1,5 +1,13 @@
 import type { LucideIcon } from 'lucide-react';
-import { User, GitBranch, Palette, AlertTriangle, Workflow, Database } from 'lucide-react';
+import {
+  User,
+  GitBranch,
+  Palette,
+  AlertTriangle,
+  Workflow,
+  Database,
+  FlaskConical,
+} from 'lucide-react';
 import type { ProjectSettingsViewId } from '../hooks/use-project-settings-view';
 
 export interface ProjectNavigationItem {
@@ -11,6 +19,7 @@ export interface ProjectNavigationItem {
 export const PROJECT_SETTINGS_NAV_ITEMS: ProjectNavigationItem[] = [
   { id: 'identity', label: 'Identity', icon: User },
   { id: 'worktrees', label: 'Worktrees', icon: GitBranch },
+  { id: 'testing', label: 'Testing', icon: FlaskConical },
   { id: 'theme', label: 'Theme', icon: Palette },
   { id: 'claude', label: 'Models', icon: Workflow },
   { id: 'data', label: 'Data', icon: Database },

apps/ui/src/components/views/project-settings-view/hooks/use-project-settings-view.ts

@@ -4,6 +4,7 @@ export type ProjectSettingsViewId =
   | 'identity'
   | 'theme'
   | 'worktrees'
+  | 'testing'
   | 'claude'
   | 'data'
   | 'danger';

apps/ui/src/components/views/project-settings-view/index.ts

@@ -2,5 +2,6 @@ export { ProjectSettingsView } from './project-settings-view';
 export { ProjectIdentitySection } from './project-identity-section';
 export { ProjectThemeSection } from './project-theme-section';
 export { WorktreePreferencesSection } from './worktree-preferences-section';
+export { TestingSection } from './testing-section';
 export { useProjectSettingsView, type ProjectSettingsViewId } from './hooks';
 export { ProjectSettingsNavigation } from './components/project-settings-navigation';

apps/ui/src/components/views/project-settings-view/project-bulk-replace-dialog.tsx

@@ -25,7 +25,7 @@ import type {
   ClaudeCompatibleProvider,
   ClaudeModelAlias,
 } from '@automaker/types';
-import { DEFAULT_PHASE_MODELS } from '@automaker/types';
+import { DEFAULT_PHASE_MODELS, DEFAULT_GLOBAL_SETTINGS } from '@automaker/types';
 
 interface ProjectBulkReplaceDialogProps {
   open: boolean;
@@ -50,6 +50,10 @@ const PHASE_LABELS: Record<PhaseModelKey, string> = {
 
 const ALL_PHASES = Object.keys(PHASE_LABELS) as PhaseModelKey[];
 
+// Special key for default feature model (not a phase but included in bulk replace)
+const DEFAULT_FEATURE_MODEL_KEY = '__defaultFeatureModel__' as const;
+type ExtendedPhaseKey = PhaseModelKey | typeof DEFAULT_FEATURE_MODEL_KEY;
+
 // Claude model display names
 const CLAUDE_MODEL_DISPLAY: Record<ClaudeModelAlias, string> = {
   haiku: 'Claude Haiku',
@@ -62,11 +66,18 @@ export function ProjectBulkReplaceDialog({
   onOpenChange,
   project,
 }: ProjectBulkReplaceDialogProps) {
-  const { phaseModels, setProjectPhaseModelOverride, claudeCompatibleProviders } = useAppStore();
+  const {
+    phaseModels,
+    setProjectPhaseModelOverride,
+    claudeCompatibleProviders,
+    defaultFeatureModel,
+    setProjectDefaultFeatureModel,
+  } = useAppStore();
   const [selectedProvider, setSelectedProvider] = useState<string>('anthropic');
 
   // Get project-level overrides
   const projectOverrides = project.phaseModelOverrides || {};
+  const projectDefaultFeatureModel = project.defaultFeatureModel;
 
   // Get enabled providers
   const enabledProviders = useMemo(() => {
@@ -122,11 +133,15 @@ export function ProjectBulkReplaceDialog({
   const findModelForClaudeAlias = (
     provider: ClaudeCompatibleProvider | null,
     claudeAlias: ClaudeModelAlias,
-    phase: PhaseModelKey
+    key: ExtendedPhaseKey
   ): PhaseModelEntry => {
     if (!provider) {
       // Anthropic Direct - reset to default phase model (includes correct thinking levels)
-      return DEFAULT_PHASE_MODELS[phase];
+      // For default feature model, use the default from global settings
+      if (key === DEFAULT_FEATURE_MODEL_KEY) {
+        return DEFAULT_GLOBAL_SETTINGS.defaultFeatureModel;
+      }
+      return DEFAULT_PHASE_MODELS[key];
     }
 
     // Find model that maps to this Claude alias
@@ -146,60 +161,91 @@ export function ProjectBulkReplaceDialog({
     return { model: claudeAlias };
   };
 
+  // Helper to generate preview item for any entry
+  const generatePreviewItem = (
+    key: ExtendedPhaseKey,
+    label: string,
+    currentEntry: PhaseModelEntry
+  ) => {
+    const claudeAlias = getClaudeModelAlias(currentEntry);
+    const newEntry = findModelForClaudeAlias(selectedProviderConfig, claudeAlias, key);
+
+    // Get display names
+    const getCurrentDisplay = (): string => {
+      if (currentEntry.providerId) {
+        const provider = enabledProviders.find((p) => p.id === currentEntry.providerId);
+        if (provider) {
+          const model = provider.models?.find((m) => m.id === currentEntry.model);
+          return model?.displayName || currentEntry.model;
+        }
+      }
+      return CLAUDE_MODEL_DISPLAY[claudeAlias] || currentEntry.model;
+    };
+
+    const getNewDisplay = (): string => {
+      if (newEntry.providerId && selectedProviderConfig) {
+        const model = selectedProviderConfig.models?.find((m) => m.id === newEntry.model);
+        return model?.displayName || newEntry.model;
+      }
+      return CLAUDE_MODEL_DISPLAY[newEntry.model as ClaudeModelAlias] || newEntry.model;
+    };
+
+    const isChanged =
+      currentEntry.model !== newEntry.model ||
+      currentEntry.providerId !== newEntry.providerId ||
+      currentEntry.thinkingLevel !== newEntry.thinkingLevel;
+
+    return {
+      key,
+      label,
+      claudeAlias,
+      currentDisplay: getCurrentDisplay(),
+      newDisplay: getNewDisplay(),
+      newEntry,
+      isChanged,
+    };
+  };
+
   // Generate preview of changes
   const preview = useMemo(() => {
-    return ALL_PHASES.map((phase) => {
-      // Current effective value (project override or global)
+    // Default feature model entry (first in the list)
+    const globalDefaultFeature = defaultFeatureModel ?? DEFAULT_GLOBAL_SETTINGS.defaultFeatureModel;
+    const currentDefaultFeature = projectDefaultFeatureModel || globalDefaultFeature;
+    const defaultFeaturePreview = generatePreviewItem(
+      DEFAULT_FEATURE_MODEL_KEY,
+      'Default Feature Model',
+      currentDefaultFeature
+    );
+
+    // Phase model entries
+    const phasePreview = ALL_PHASES.map((phase) => {
       const globalEntry = phaseModels[phase] ?? DEFAULT_PHASE_MODELS[phase];
       const currentEntry = projectOverrides[phase] || globalEntry;
-      const claudeAlias = getClaudeModelAlias(currentEntry);
-      const newEntry = findModelForClaudeAlias(selectedProviderConfig, claudeAlias, phase);
-
-      // Get display names
-      const getCurrentDisplay = (): string => {
-        if (currentEntry.providerId) {
-          const provider = enabledProviders.find((p) => p.id === currentEntry.providerId);
-          if (provider) {
-            const model = provider.models?.find((m) => m.id === currentEntry.model);
-            return model?.displayName || currentEntry.model;
-          }
-        }
-        return CLAUDE_MODEL_DISPLAY[claudeAlias] || currentEntry.model;
-      };
-
-      const getNewDisplay = (): string => {
-        if (newEntry.providerId && selectedProviderConfig) {
-          const model = selectedProviderConfig.models?.find((m) => m.id === newEntry.model);
-          return model?.displayName || newEntry.model;
-        }
-        return CLAUDE_MODEL_DISPLAY[newEntry.model as ClaudeModelAlias] || newEntry.model;
-      };
-
-      const isChanged =
-        currentEntry.model !== newEntry.model ||
-        currentEntry.providerId !== newEntry.providerId ||
-        currentEntry.thinkingLevel !== newEntry.thinkingLevel;
-
-      return {
-        phase,
-        label: PHASE_LABELS[phase],
-        claudeAlias,
-        currentDisplay: getCurrentDisplay(),
-        newDisplay: getNewDisplay(),
-        newEntry,
-        isChanged,
-      };
+      return generatePreviewItem(phase, PHASE_LABELS[phase], currentEntry);
     });
-  }, [phaseModels, projectOverrides, selectedProviderConfig, enabledProviders]);
+
+    return [defaultFeaturePreview, ...phasePreview];
+  }, [
+    phaseModels,
+    projectOverrides,
+    selectedProviderConfig,
+    enabledProviders,
+    defaultFeatureModel,
+    projectDefaultFeatureModel,
+  ]);
 
   // Count how many will change
   const changeCount = preview.filter((p) => p.isChanged).length;
 
   // Apply the bulk replace as project overrides
   const handleApply = () => {
-    preview.forEach(({ phase, newEntry, isChanged }) => {
+    preview.forEach(({ key, newEntry, isChanged }) => {
       if (isChanged) {
-        setProjectPhaseModelOverride(project.id, phase, newEntry);
+        if (key === DEFAULT_FEATURE_MODEL_KEY) {
+          setProjectDefaultFeatureModel(project.id, newEntry);
+        } else {
+          setProjectPhaseModelOverride(project.id, key as PhaseModelKey, newEntry);
+        }
       }
     });
     onOpenChange(false);
@@ -295,7 +341,7 @@ export function ProjectBulkReplaceDialog({
               <div className="flex items-center justify-between">
                 <label className="text-sm font-medium">Preview Changes</label>
                 <span className="text-xs text-muted-foreground">
-                  {changeCount} of {ALL_PHASES.length} will be overridden
+                  {changeCount} of {preview.length} will be overridden
                 </span>
               </div>
               <div className="border rounded-lg overflow-hidden max-h-[300px] overflow-y-auto">
@@ -311,15 +357,23 @@ export function ProjectBulkReplaceDialog({
                     </tr>
                   </thead>
                   <tbody>
-                    {preview.map(({ phase, label, currentDisplay, newDisplay, isChanged }) => (
+                    {preview.map(({ key, label, currentDisplay, newDisplay, isChanged }) => (
                       <tr
-                        key={phase}
+                        key={key}
                         className={cn(
                           'border-t border-border/50',
-                          isChanged ? 'bg-brand-500/5' : 'opacity-50'
+                          isChanged ? 'bg-brand-500/5' : 'opacity-50',
+                          key === DEFAULT_FEATURE_MODEL_KEY && 'bg-accent/30'
                         )}
                       >
-                        <td className="p-2 font-medium">{label}</td>
+                        <td className="p-2 font-medium">
+                          {label}
+                          {key === DEFAULT_FEATURE_MODEL_KEY && (
+                            <span className="ml-2 text-[10px] px-1.5 py-0.5 rounded bg-brand-500/20 text-brand-500">
+                              Feature Default
+                            </span>
+                          )}
+                        </td>
                         <td className="p-2 text-muted-foreground">{currentDisplay}</td>
                         <td className="p-2 text-center">
                           {isChanged ? (

apps/ui/src/components/views/project-settings-view/project-models-section.tsx

@@ -1,13 +1,13 @@
 import { useState } from 'react';
 import { useAppStore } from '@/store/app-store';
 import { Button } from '@/components/ui/button';
-import { Workflow, RotateCcw, Globe, Check, Replace } from 'lucide-react';
+import { Workflow, RotateCcw, Globe, Check, Replace, Sparkles } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { Project } from '@/lib/electron';
 import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
 import { ProjectBulkReplaceDialog } from './project-bulk-replace-dialog';
 import type { PhaseModelKey, PhaseModelEntry } from '@automaker/types';
-import { DEFAULT_PHASE_MODELS } from '@automaker/types';
+import { DEFAULT_PHASE_MODELS, DEFAULT_GLOBAL_SETTINGS } from '@automaker/types';
 
 interface ProjectModelsSectionProps {
   project: Project;
@@ -88,6 +88,127 @@ const MEMORY_TASKS: PhaseConfig[] = [
 
 const ALL_PHASES = [...QUICK_TASKS, ...VALIDATION_TASKS, ...GENERATION_TASKS, ...MEMORY_TASKS];
 
+/**
+ * Default feature model override section for per-project settings.
+ */
+function FeatureDefaultModelOverrideSection({ project }: { project: Project }) {
+  const {
+    defaultFeatureModel: globalDefaultFeatureModel,
+    setProjectDefaultFeatureModel,
+    claudeCompatibleProviders,
+  } = useAppStore();
+
+  const globalValue: PhaseModelEntry =
+    globalDefaultFeatureModel ?? DEFAULT_GLOBAL_SETTINGS.defaultFeatureModel;
+  const projectOverride = project.defaultFeatureModel;
+  const hasOverride = !!projectOverride;
+  const effectiveValue = projectOverride || globalValue;
+
+  // Get display name for a model
+  const getModelDisplayName = (entry: PhaseModelEntry): string => {
+    if (entry.providerId) {
+      const provider = (claudeCompatibleProviders || []).find((p) => p.id === entry.providerId);
+      if (provider) {
+        const model = provider.models?.find((m) => m.id === entry.model);
+        if (model) {
+          return `${model.displayName} (${provider.name})`;
+        }
+      }
+    }
+    // Default to model ID for built-in models (both short aliases and canonical IDs)
+    const modelMap: Record<string, string> = {
+      haiku: 'Claude Haiku',
+      sonnet: 'Claude Sonnet',
+      opus: 'Claude Opus',
+      'claude-haiku': 'Claude Haiku',
+      'claude-sonnet': 'Claude Sonnet',
+      'claude-opus': 'Claude Opus',
+    };
+    return modelMap[entry.model] || entry.model;
+  };
+
+  const handleClearOverride = () => {
+    setProjectDefaultFeatureModel(project.id, null);
+  };
+
+  const handleSetOverride = (entry: PhaseModelEntry) => {
+    setProjectDefaultFeatureModel(project.id, entry);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium text-foreground">Feature Defaults</h3>
+        <p className="text-xs text-muted-foreground">
+          Default model for new feature cards in this project
+        </p>
+      </div>
+      <div className="space-y-3">
+        <div
+          className={cn(
+            'flex items-center justify-between p-4 rounded-xl',
+            'bg-accent/20 border',
+            hasOverride ? 'border-brand-500/30 bg-brand-500/5' : 'border-border/30',
+            'hover:bg-accent/30 transition-colors'
+          )}
+        >
+          <div className="flex-1 pr-4">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg bg-brand-500/10 flex items-center justify-center">
+                <Sparkles className="w-4 h-4 text-brand-500" />
+              </div>
+              <h4 className="text-sm font-medium text-foreground">Default Feature Model</h4>
+              {hasOverride ? (
+                <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-brand-500/20 text-brand-500">
+                  Override
+                </span>
+              ) : (
+                <span className="flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground">
+                  <Globe className="w-3 h-3" />
+                  Global
+                </span>
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground mt-1 ml-10">
+              Model and thinking level used when creating new feature cards
+            </p>
+            {hasOverride && (
+              <p className="text-xs text-brand-500 mt-1 ml-10">
+                Using: {getModelDisplayName(effectiveValue)}
+              </p>
+            )}
+            {!hasOverride && (
+              <p className="text-xs text-muted-foreground/70 mt-1 ml-10">
+                Using global: {getModelDisplayName(globalValue)}
+              </p>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2">
+            {hasOverride && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleClearOverride}
+                className="h-8 px-2 text-xs text-muted-foreground hover:text-foreground"
+              >
+                <RotateCcw className="w-3.5 h-3.5 mr-1" />
+                Reset
+              </Button>
+            )}
+            <PhaseModelSelector
+              compact
+              value={effectiveValue}
+              onChange={handleSetOverride}
+              align="end"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function PhaseOverrideItem({
   phase,
   project,
@@ -234,8 +355,10 @@ export function ProjectModelsSection({ project }: ProjectModelsSectionProps) {
     useAppStore();
   const [showBulkReplace, setShowBulkReplace] = useState(false);
 
-  // Count how many overrides are set
-  const overrideCount = Object.keys(project.phaseModelOverrides || {}).length;
+  // Count how many overrides are set (including defaultFeatureModel)
+  const phaseOverrideCount = Object.keys(project.phaseModelOverrides || {}).length;
+  const hasDefaultFeatureModelOverride = !!project.defaultFeatureModel;
+  const overrideCount = phaseOverrideCount + (hasDefaultFeatureModelOverride ? 1 : 0);
 
   // Check if Claude is available
   const isClaudeDisabled = disabledProviders.includes('claude');
@@ -328,6 +451,9 @@ export function ProjectModelsSection({ project }: ProjectModelsSectionProps) {
 
       {/* Content */}
       <div className="p-6 space-y-8">
+        {/* Feature Defaults */}
+        <FeatureDefaultModelOverrideSection project={project} />
+
         {/* Quick Tasks */}
         <PhaseGroup
           title="Quick Tasks"

apps/ui/src/components/views/project-settings-view/project-settings-view.tsx

@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button';
 import { ProjectIdentitySection } from './project-identity-section';
 import { ProjectThemeSection } from './project-theme-section';
 import { WorktreePreferencesSection } from './worktree-preferences-section';
+import { TestingSection } from './testing-section';
 import { ProjectModelsSection } from './project-models-section';
 import { DataManagementSection } from './data-management-section';
 import { DangerZoneSection } from '../settings-view/danger-zone/danger-zone-section';
@@ -86,6 +87,8 @@ export function ProjectSettingsView() {
         return <ProjectThemeSection project={currentProject} />;
       case 'worktrees':
         return <WorktreePreferencesSection project={currentProject} />;
+      case 'testing':
+        return <TestingSection project={currentProject} />;
       case 'claude':
         return <ProjectModelsSection project={currentProject} />;
       case 'data':

apps/ui/src/components/views/project-settings-view/testing-section.tsx

@@ -0,0 +1,223 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { FlaskConical, Save, RotateCcw, Info } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import type { Project } from '@/lib/electron';
+
+interface TestingSectionProps {
+  project: Project;
+}
+
+export function TestingSection({ project }: TestingSectionProps) {
+  const [testCommand, setTestCommand] = useState('');
+  const [originalTestCommand, setOriginalTestCommand] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Check if there are unsaved changes
+  const hasChanges = testCommand !== originalTestCommand;
+
+  // Load project settings when project changes
+  useEffect(() => {
+    let isCancelled = false;
+    const currentPath = project.path;
+
+    const loadProjectSettings = async () => {
+      setIsLoading(true);
+      try {
+        const httpClient = getHttpApiClient();
+        const response = await httpClient.settings.getProject(currentPath);
+
+        // Avoid updating state if component unmounted or project changed
+        if (isCancelled) return;
+
+        if (response.success && response.settings) {
+          const command = response.settings.testCommand || '';
+          setTestCommand(command);
+          setOriginalTestCommand(command);
+        }
+      } catch (error) {
+        if (!isCancelled) {
+          console.error('Failed to load project settings:', error);
+        }
+      } finally {
+        if (!isCancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    loadProjectSettings();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [project.path]);
+
+  // Save test command
+  const handleSave = useCallback(async () => {
+    setIsSaving(true);
+    try {
+      const httpClient = getHttpApiClient();
+      const normalizedCommand = testCommand.trim();
+      const response = await httpClient.settings.updateProject(project.path, {
+        testCommand: normalizedCommand || undefined,
+      });
+
+      if (response.success) {
+        setTestCommand(normalizedCommand);
+        setOriginalTestCommand(normalizedCommand);
+        toast.success('Test command saved');
+      } else {
+        toast.error('Failed to save test command', {
+          description: response.error,
+        });
+      }
+    } catch (error) {
+      console.error('Failed to save test command:', error);
+      toast.error('Failed to save test command');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [project.path, testCommand]);
+
+  // Reset to original value
+  const handleReset = useCallback(() => {
+    setTestCommand(originalTestCommand);
+  }, [originalTestCommand]);
+
+  // Use a preset command
+  const handleUsePreset = useCallback((command: string) => {
+    setTestCommand(command);
+  }, []);
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <FlaskConical className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            Testing Configuration
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure how tests are run for this project.
+        </p>
+      </div>
+
+      <div className="p-6 space-y-6">
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <Spinner size="md" />
+          </div>
+        ) : (
+          <>
+            {/* Test Command Input */}
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="test-command" className="text-foreground font-medium">
+                  Test Command
+                </Label>
+                {hasChanges && (
+                  <span className="text-xs text-amber-500 font-medium">(unsaved changes)</span>
+                )}
+              </div>
+              <Input
+                id="test-command"
+                value={testCommand}
+                onChange={(e) => setTestCommand(e.target.value)}
+                placeholder="e.g., npm test, yarn test, pytest, go test ./..."
+                className="font-mono text-sm"
+                data-testid="test-command-input"
+              />
+              <p className="text-xs text-muted-foreground/80 leading-relaxed">
+                The command to run tests for this project. If not specified, the test runner will
+                auto-detect based on your project structure (package.json, Cargo.toml, go.mod,
+                etc.).
+              </p>
+            </div>
+
+            {/* Auto-detection Info */}
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-accent/20 border border-border/30">
+              <Info className="w-4 h-4 text-brand-500 mt-0.5 shrink-0" />
+              <div className="text-xs text-muted-foreground">
+                <p className="font-medium text-foreground mb-1">Auto-detection</p>
+                <p>
+                  When no custom command is set, the test runner automatically detects and uses the
+                  appropriate test framework based on your project files (Vitest, Jest, Pytest,
+                  Cargo, Go Test, etc.).
+                </p>
+              </div>
+            </div>
+
+            {/* Quick Presets */}
+            <div className="space-y-3">
+              <Label className="text-foreground font-medium">Quick Presets</Label>
+              <div className="flex flex-wrap gap-2">
+                {[
+                  { label: 'npm test', command: 'npm test' },
+                  { label: 'yarn test', command: 'yarn test' },
+                  { label: 'pnpm test', command: 'pnpm test' },
+                  { label: 'bun test', command: 'bun test' },
+                  { label: 'pytest', command: 'pytest' },
+                  { label: 'cargo test', command: 'cargo test' },
+                  { label: 'go test', command: 'go test ./...' },
+                ].map((preset) => (
+                  <Button
+                    key={preset.command}
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleUsePreset(preset.command)}
+                    className="text-xs font-mono"
+                  >
+                    {preset.label}
+                  </Button>
+                ))}
+              </div>
+              <p className="text-xs text-muted-foreground/80">
+                Click a preset to use it as your test command.
+              </p>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex items-center justify-end gap-2 pt-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleReset}
+                disabled={!hasChanges || isSaving}
+                className="gap-1.5"
+              >
+                <RotateCcw className="w-3.5 h-3.5" />
+                Reset
+              </Button>
+              <Button
+                size="sm"
+                onClick={handleSave}
+                disabled={!hasChanges || isSaving}
+                className="gap-1.5"
+              >
+                {isSaving ? <Spinner size="xs" /> : <Save className="w-3.5 h-3.5" />}
+                Save
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}