Merge branch: resolve conflict in worktree-actions-dropdown.tsx

apps/ui/src/components/views/board-view/dialogs/add-edit-pipeline-step-dialog.tsx

@@ -0,0 +1,254 @@
+import { useState, useRef, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Upload } from 'lucide-react';
+import { toast } from 'sonner';
+import type { PipelineStep } from '@automaker/types';
+import { cn } from '@/lib/utils';
+import { STEP_TEMPLATES } from './pipeline-step-templates';
+
+// Color options for pipeline columns
+const COLOR_OPTIONS = [
+  { value: 'bg-blue-500/20', label: 'Blue', preview: 'bg-blue-500' },
+  { value: 'bg-purple-500/20', label: 'Purple', preview: 'bg-purple-500' },
+  { value: 'bg-green-500/20', label: 'Green', preview: 'bg-green-500' },
+  { value: 'bg-orange-500/20', label: 'Orange', preview: 'bg-orange-500' },
+  { value: 'bg-red-500/20', label: 'Red', preview: 'bg-red-500' },
+  { value: 'bg-pink-500/20', label: 'Pink', preview: 'bg-pink-500' },
+  { value: 'bg-cyan-500/20', label: 'Cyan', preview: 'bg-cyan-500' },
+  { value: 'bg-amber-500/20', label: 'Amber', preview: 'bg-amber-500' },
+  { value: 'bg-indigo-500/20', label: 'Indigo', preview: 'bg-indigo-500' },
+];
+
+interface AddEditPipelineStepDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (step: Omit<PipelineStep, 'id' | 'createdAt' | 'updatedAt'> & { id?: string }) => void;
+  existingStep?: PipelineStep | null;
+  defaultOrder: number;
+}
+
+export function AddEditPipelineStepDialog({
+  open,
+  onClose,
+  onSave,
+  existingStep,
+  defaultOrder,
+}: AddEditPipelineStepDialogProps) {
+  const isEditing = !!existingStep;
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [name, setName] = useState('');
+  const [instructions, setInstructions] = useState('');
+  const [colorClass, setColorClass] = useState(COLOR_OPTIONS[0].value);
+  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null);
+
+  // Reset form when dialog opens/closes or existingStep changes
+  useEffect(() => {
+    if (open) {
+      if (existingStep) {
+        setName(existingStep.name);
+        setInstructions(existingStep.instructions);
+        setColorClass(existingStep.colorClass);
+        setSelectedTemplate(null);
+      } else {
+        setName('');
+        setInstructions('');
+        setColorClass(COLOR_OPTIONS[defaultOrder % COLOR_OPTIONS.length].value);
+        setSelectedTemplate(null);
+      }
+    }
+  }, [open, existingStep, defaultOrder]);
+
+  const handleTemplateClick = (templateId: string) => {
+    const template = STEP_TEMPLATES.find((t) => t.id === templateId);
+    if (template) {
+      setName(template.name);
+      setInstructions(template.instructions);
+      setColorClass(template.colorClass);
+      setSelectedTemplate(templateId);
+      toast.success(`Loaded "${template.name}" template`);
+    }
+  };
+
+  const handleFileUpload = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const content = await file.text();
+      setInstructions(content);
+      toast.success('Instructions loaded from file');
+    } catch {
+      toast.error('Failed to load file');
+    }
+
+    // Reset the input so the same file can be selected again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleSave = () => {
+    if (!name.trim()) {
+      toast.error('Step name is required');
+      return;
+    }
+
+    if (!instructions.trim()) {
+      toast.error('Step instructions are required');
+      return;
+    }
+
+    onSave({
+      id: existingStep?.id,
+      name: name.trim(),
+      instructions: instructions.trim(),
+      colorClass,
+      order: existingStep?.order ?? defaultOrder,
+    });
+
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
+        {/* Hidden file input for loading instructions from .md files */}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".md,.txt"
+          className="hidden"
+          onChange={handleFileInputChange}
+        />
+
+        <DialogHeader>
+          <DialogTitle>{isEditing ? 'Edit Pipeline Step' : 'Add Pipeline Step'}</DialogTitle>
+          <DialogDescription>
+            {isEditing
+              ? 'Modify the step configuration below.'
+              : 'Configure a new step for your pipeline. Choose a template to get started quickly, or create from scratch.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto py-4 space-y-6">
+          {/* Template Quick Start - Only show for new steps */}
+          {!isEditing && (
+            <div className="space-y-3">
+              <Label className="text-sm font-medium">Quick Start from Template</Label>
+              <div className="flex flex-wrap gap-2">
+                {STEP_TEMPLATES.map((template) => (
+                  <button
+                    key={template.id}
+                    type="button"
+                    onClick={() => handleTemplateClick(template.id)}
+                    className={cn(
+                      'flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-sm',
+                      selectedTemplate === template.id
+                        ? 'border-primary bg-primary/10 ring-1 ring-primary'
+                        : 'border-border hover:border-primary/50 hover:bg-muted/50'
+                    )}
+                  >
+                    <div
+                      className={cn('w-2 h-2 rounded-full', template.colorClass.replace('/20', ''))}
+                    />
+                    {template.name}
+                  </button>
+                ))}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Click a template to pre-fill the form, then customize as needed.
+              </p>
+            </div>
+          )}
+
+          {/* Divider */}
+          {!isEditing && <div className="border-t" />}
+
+          {/* Step Name */}
+          <div className="space-y-2">
+            <Label htmlFor="step-name">
+              Step Name <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="step-name"
+              placeholder="e.g., Code Review, Testing, Documentation"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              autoFocus={isEditing}
+            />
+          </div>
+
+          {/* Color Selection */}
+          <div className="space-y-2">
+            <Label>Column Color</Label>
+            <div className="flex flex-wrap gap-2">
+              {COLOR_OPTIONS.map((color) => (
+                <button
+                  key={color.value}
+                  type="button"
+                  className={cn(
+                    'w-8 h-8 rounded-full transition-all',
+                    color.preview,
+                    colorClass === color.value
+                      ? 'ring-2 ring-offset-2 ring-primary'
+                      : 'opacity-60 hover:opacity-100'
+                  )}
+                  onClick={() => setColorClass(color.value)}
+                  title={color.label}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Agent Instructions */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="step-instructions">
+                Agent Instructions <span className="text-destructive">*</span>
+              </Label>
+              <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={handleFileUpload}>
+                <Upload className="h-3 w-3 mr-1" />
+                Load from file
+              </Button>
+            </div>
+            <Textarea
+              id="step-instructions"
+              placeholder="Instructions for the agent to follow during this pipeline step. Use markdown formatting for best results."
+              value={instructions}
+              onChange={(e) => setInstructions(e.target.value)}
+              rows={10}
+              className="font-mono text-sm"
+            />
+            <p className="text-xs text-muted-foreground">
+              These instructions will be sent to the agent when this step runs. Be specific about
+              what you want the agent to review, check, or modify.
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave}>{isEditing ? 'Update Step' : 'Add to Pipeline'}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -21,11 +21,9 @@ import {
   FeatureTextFilePath as DescriptionTextFilePath,
   ImagePreviewMap,
 } from '@/components/ui/description-image-dropzone';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { Sparkles, ChevronDown, ChevronRight, Play, Cpu, FolderKanban } from 'lucide-react';
+import { Play, Cpu, FolderKanban } from 'lucide-react';
 import { toast } from 'sonner';
 import { cn } from '@/lib/utils';
-import { getElectronAPI } from '@/lib/electron';
 import { modelSupportsThinking } from '@/lib/utils';
 import {
   useAppStore,
@@ -43,16 +41,12 @@ import {
   WorkModeSelector,
   PlanningModeSelect,
   AncestorContextSection,
+  EnhanceWithAI,
+  EnhancementHistoryButton,
+  type BaseHistoryEntry,
 } from '../shared';
 import type { WorkMode } from '../shared';
 import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
-import { ModelOverrideTrigger, useModelOverride } from '@/components/shared';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import {
   getAncestors,
@@ -97,6 +91,13 @@ interface AddFeatureDialogProps {
   allFeatures?: Feature[];
 }
 
+/**
+ * A single entry in the description history
+ */
+interface DescriptionHistoryEntry extends BaseHistoryEntry {
+  description: string;
+}
+
 export function AddFeatureDialog({
   open,
   onOpenChange,
@@ -139,11 +140,9 @@ export function AddFeatureDialog({
   // UI state
   const [previewMap, setPreviewMap] = useState<ImagePreviewMap>(() => new Map());
   const [descriptionError, setDescriptionError] = useState(false);
-  const [isEnhancing, setIsEnhancing] = useState(false);
-  const [enhancementMode, setEnhancementMode] = useState<
-    'improve' | 'technical' | 'simplify' | 'acceptance'
-  >('improve');
-  const [enhanceOpen, setEnhanceOpen] = useState(false);
+
+  // Description history state
+  const [descriptionHistory, setDescriptionHistory] = useState<DescriptionHistoryEntry[]>([]);
 
   // Spawn mode state
   const [ancestors, setAncestors] = useState<AncestorContext[]>([]);
@@ -152,9 +151,6 @@ export function AddFeatureDialog({
   // Get defaults from store
   const { defaultPlanningMode, defaultRequirePlanApproval } = useAppStore();
 
-  // Enhancement model override
-  const enhancementOverride = useModelOverride({ phase: 'enhancementModel' });
-
   // Track previous open state to detect when dialog opens
   const wasOpenRef = useRef(false);
 
@@ -171,6 +167,9 @@ export function AddFeatureDialog({
       setRequirePlanApproval(defaultRequirePlanApproval);
       setModelEntry({ model: 'opus' });
 
+      // Initialize description history (empty for new feature)
+      setDescriptionHistory([]);
+
       // Initialize ancestors for spawn mode
       if (parentFeature) {
         const ancestorList = getAncestors(parentFeature, allFeatures);
@@ -279,7 +278,7 @@ export function AddFeatureDialog({
     setRequirePlanApproval(defaultRequirePlanApproval);
     setPreviewMap(new Map());
     setDescriptionError(false);
-    setEnhanceOpen(false);
+    setDescriptionHistory([]);
     onOpenChange(false);
   };
 
@@ -302,33 +301,6 @@ export function AddFeatureDialog({
     }
   };
 
-  const handleEnhanceDescription = async () => {
-    if (!description.trim() || isEnhancing) return;
-
-    setIsEnhancing(true);
-    try {
-      const api = getElectronAPI();
-      const result = await api.enhancePrompt?.enhance(
-        description,
-        enhancementMode,
-        enhancementOverride.effectiveModel,
-        enhancementOverride.effectiveModelEntry.thinkingLevel
-      );
-
-      if (result?.success && result.enhancedText) {
-        setDescription(result.enhancedText);
-        toast.success('Description enhanced!');
-      } else {
-        toast.error(result?.error || 'Failed to enhance description');
-      }
-    } catch (error) {
-      logger.error('Enhancement failed:', error);
-      toast.error('Failed to enhance description');
-    } finally {
-      setIsEnhancing(false);
-    }
-  };
-
   // Shared card styling
   const cardClass = 'rounded-lg border border-border/50 bg-muted/30 p-4 space-y-3';
   const sectionHeaderClass = 'flex items-center gap-2 text-sm font-medium text-foreground';
@@ -380,7 +352,18 @@ export function AddFeatureDialog({
           {/* Task Details Section */}
           <div className={cardClass}>
             <div className="space-y-2">
-              <Label htmlFor="description">Description</Label>
+              <div className="flex items-center justify-between">
+                <Label htmlFor="description">Description</Label>
+                {/* Version History Button */}
+                <EnhancementHistoryButton
+                  history={descriptionHistory}
+                  currentValue={description}
+                  onRestore={setDescription}
+                  valueAccessor={(entry) => entry.description}
+                  title="Version History"
+                  restoreMessage="Description restored from history"
+                />
+              </div>
               <DescriptionImageDropZone
                 value={description}
                 onChange={(value) => {
@@ -409,71 +392,35 @@ export function AddFeatureDialog({
               />
             </div>
 
-            {/* Collapsible Enhancement Section */}
-            <Collapsible open={enhanceOpen} onOpenChange={setEnhanceOpen}>
-              <CollapsibleTrigger asChild>
-                <button className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors w-full py-1">
-                  {enhanceOpen ? (
-                    <ChevronDown className="w-4 h-4" />
-                  ) : (
-                    <ChevronRight className="w-4 h-4" />
-                  )}
-                  <Sparkles className="w-4 h-4" />
-                  <span>Enhance with AI</span>
-                </button>
-              </CollapsibleTrigger>
-              <CollapsibleContent className="pt-3">
-                <div className="flex flex-wrap items-center gap-2 pl-6">
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="outline" size="sm" className="h-8 text-xs">
-                        {enhancementMode === 'improve' && 'Improve Clarity'}
-                        {enhancementMode === 'technical' && 'Add Technical Details'}
-                        {enhancementMode === 'simplify' && 'Simplify'}
-                        {enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
-                        <ChevronDown className="w-3 h-3 ml-1" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="start">
-                      <DropdownMenuItem onClick={() => setEnhancementMode('improve')}>
-                        Improve Clarity
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => setEnhancementMode('technical')}>
-                        Add Technical Details
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => setEnhancementMode('simplify')}>
-                        Simplify
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
-                        Add Acceptance Criteria
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-
-                  <Button
-                    type="button"
-                    variant="default"
-                    size="sm"
-                    className="h-8 text-xs"
-                    onClick={handleEnhanceDescription}
-                    disabled={!description.trim() || isEnhancing}
-                    loading={isEnhancing}
-                  >
-                    <Sparkles className="w-3 h-3 mr-1" />
-                    Enhance
-                  </Button>
-
-                  <ModelOverrideTrigger
-                    currentModelEntry={enhancementOverride.effectiveModelEntry}
-                    onModelChange={enhancementOverride.setOverride}
-                    phase="enhancementModel"
-                    isOverridden={enhancementOverride.isOverridden}
-                    size="sm"
-                    variant="icon"
-                  />
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
+            {/* Enhancement Section */}
+            <EnhanceWithAI
+              value={description}
+              onChange={setDescription}
+              onHistoryAdd={({ mode, originalText, enhancedText }) => {
+                const timestamp = new Date().toISOString();
+                setDescriptionHistory((prev) => {
+                  const newHistory = [...prev];
+                  // Add original text first (so user can restore to pre-enhancement state)
+                  // Only add if it's different from the last entry to avoid duplicates
+                  const lastEntry = prev[prev.length - 1];
+                  if (!lastEntry || lastEntry.description !== originalText) {
+                    newHistory.push({
+                      description: originalText,
+                      timestamp,
+                      source: prev.length === 0 ? 'initial' : 'edit',
+                    });
+                  }
+                  // Add enhanced text
+                  newHistory.push({
+                    description: enhancedText,
+                    timestamp,
+                    source: 'enhance',
+                    enhancementMode: mode,
+                  });
+                  return newHistory;
+                });
+              }}
+            />
           </div>
 
           {/* AI & Execution Section */}

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

@@ -21,18 +21,8 @@ import {
   FeatureTextFilePath as DescriptionTextFilePath,
   ImagePreviewMap,
 } from '@/components/ui/description-image-dropzone';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import {
-  Sparkles,
-  ChevronDown,
-  ChevronRight,
-  GitBranch,
-  History,
-  Cpu,
-  FolderKanban,
-} from 'lucide-react';
+import { GitBranch, Cpu, FolderKanban } from 'lucide-react';
 import { toast } from 'sonner';
-import { getElectronAPI } from '@/lib/electron';
 import { cn, modelSupportsThinking } from '@/lib/utils';
 import { Feature, ModelAlias, ThinkingLevel, useAppStore, PlanningMode } from '@/store/app-store';
 import type { ReasoningEffort, PhaseModelEntry, DescriptionHistoryEntry } from '@automaker/types';
@@ -41,17 +31,12 @@ import {
   PrioritySelector,
   WorkModeSelector,
   PlanningModeSelect,
+  EnhanceWithAI,
+  EnhancementHistoryButton,
+  type EnhancementMode,
 } from '../shared';
 import type { WorkMode } from '../shared';
 import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
-import { ModelOverrideTrigger, useModelOverride } from '@/components/shared';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  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';
@@ -79,7 +64,8 @@ interface EditFeatureDialogProps {
       requirePlanApproval: boolean;
     },
     descriptionHistorySource?: 'enhance' | 'edit',
-    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+    enhancementMode?: EnhancementMode,
+    preEnhancementDescription?: string
   ) => void;
   categorySuggestions: string[];
   branchSuggestions: string[];
@@ -110,11 +96,6 @@ export function EditFeatureDialog({
   const [editFeaturePreviewMap, setEditFeaturePreviewMap] = useState<ImagePreviewMap>(
     () => new Map()
   );
-  const [isEnhancing, setIsEnhancing] = useState(false);
-  const [enhancementMode, setEnhancementMode] = useState<
-    'improve' | 'technical' | 'simplify' | 'acceptance'
-  >('improve');
-  const [enhanceOpen, setEnhanceOpen] = useState(false);
   const [showDependencyTree, setShowDependencyTree] = useState(false);
   const [planningMode, setPlanningMode] = useState<PlanningMode>(feature?.planningMode ?? 'skip');
   const [requirePlanApproval, setRequirePlanApproval] = useState(
@@ -133,15 +114,16 @@ export function EditFeatureDialog({
 
   // Track the source of description changes for history
   const [descriptionChangeSource, setDescriptionChangeSource] = useState<
-    { source: 'enhance'; mode: 'improve' | 'technical' | 'simplify' | 'acceptance' } | 'edit' | null
+    { source: 'enhance'; mode: EnhancementMode } | 'edit' | null
   >(null);
   // Track the original description when the dialog opened for comparison
   const [originalDescription, setOriginalDescription] = useState(feature?.description ?? '');
-  // Track if history dropdown is open
-  const [showHistory, setShowHistory] = useState(false);
-
-  // Enhancement model override
-  const enhancementOverride = useModelOverride({ phase: 'enhancementModel' });
+  // Track the description before enhancement (so it can be restored)
+  const [preEnhancementDescription, setPreEnhancementDescription] = useState<string | null>(null);
+  // Local history state for real-time display (combines persisted + session history)
+  const [localHistory, setLocalHistory] = useState<DescriptionHistoryEntry[]>(
+    feature?.descriptionHistory ?? []
+  );
 
   useEffect(() => {
     setEditingFeature(feature);
@@ -153,8 +135,8 @@ export function EditFeatureDialog({
       // Reset history tracking state
       setOriginalDescription(feature.description ?? '');
       setDescriptionChangeSource(null);
-      setShowHistory(false);
-      setEnhanceOpen(false);
+      setPreEnhancementDescription(null);
+      setLocalHistory(feature.descriptionHistory ?? []);
       // Reset model entry
       setModelEntry({
         model: (feature.model as ModelAlias) || 'opus',
@@ -164,7 +146,8 @@ export function EditFeatureDialog({
     } else {
       setEditFeaturePreviewMap(new Map());
       setDescriptionChangeSource(null);
-      setShowHistory(false);
+      setPreEnhancementDescription(null);
+      setLocalHistory([]);
     }
   }, [feature]);
 
@@ -226,7 +209,13 @@ export function EditFeatureDialog({
       }
     }
 
-    onUpdate(editingFeature.id, updates, historySource, historyEnhancementMode);
+    onUpdate(
+      editingFeature.id,
+      updates,
+      historySource,
+      historyEnhancementMode,
+      preEnhancementDescription ?? undefined
+    );
     setEditFeaturePreviewMap(new Map());
     onClose();
   };
@@ -237,36 +226,6 @@ export function EditFeatureDialog({
     }
   };
 
-  const handleEnhanceDescription = async () => {
-    if (!editingFeature?.description.trim() || isEnhancing) return;
-
-    setIsEnhancing(true);
-    try {
-      const api = getElectronAPI();
-      const result = await api.enhancePrompt?.enhance(
-        editingFeature.description,
-        enhancementMode,
-        enhancementOverride.effectiveModel, // API accepts string, extract from PhaseModelEntry
-        enhancementOverride.effectiveModelEntry.thinkingLevel // Pass thinking level
-      );
-
-      if (result?.success && result.enhancedText) {
-        const enhancedText = result.enhancedText;
-        setEditingFeature((prev) => (prev ? { ...prev, description: enhancedText } : prev));
-        // Track that this change was from enhancement
-        setDescriptionChangeSource({ source: 'enhance', mode: enhancementMode });
-        toast.success('Description enhanced!');
-      } else {
-        toast.error(result?.error || 'Failed to enhance description');
-      }
-    } catch (error) {
-      logger.error('Enhancement failed:', error);
-      toast.error('Failed to enhance description');
-    } finally {
-      setIsEnhancing(false);
-    }
-  };
-
   if (!editingFeature) {
     return null;
   }
@@ -304,85 +263,18 @@ export function EditFeatureDialog({
             <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <Label htmlFor="edit-description">Description</Label>
-                {/* Version History Button */}
-                {feature?.descriptionHistory && feature.descriptionHistory.length > 0 && (
-                  <Popover open={showHistory} onOpenChange={setShowHistory}>
-                    <PopoverTrigger asChild>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-7 gap-1.5 text-xs text-muted-foreground"
-                      >
-                        <History className="w-3.5 h-3.5" />
-                        History ({feature.descriptionHistory.length})
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-80 p-0" align="end">
-                      <div className="p-3 border-b">
-                        <h4 className="font-medium text-sm">Version History</h4>
-                        <p className="text-xs text-muted-foreground mt-1">
-                          Click a version to restore it
-                        </p>
-                      </div>
-                      <div className="max-h-64 overflow-y-auto p-2 space-y-1">
-                        {[...(feature.descriptionHistory || [])]
-                          .reverse()
-                          .map((entry: DescriptionHistoryEntry, index: number) => {
-                            const isCurrentVersion =
-                              entry.description === editingFeature.description;
-                            const date = new Date(entry.timestamp);
-                            const formattedDate = date.toLocaleDateString(undefined, {
-                              month: 'short',
-                              day: 'numeric',
-                              hour: '2-digit',
-                              minute: '2-digit',
-                            });
-                            const sourceLabel =
-                              entry.source === 'initial'
-                                ? 'Original'
-                                : entry.source === 'enhance'
-                                  ? `Enhanced (${entry.enhancementMode || 'improve'})`
-                                  : 'Edited';
-
-                            return (
-                              <button
-                                key={`${entry.timestamp}-${index}`}
-                                onClick={() => {
-                                  setEditingFeature((prev) =>
-                                    prev ? { ...prev, description: entry.description } : prev
-                                  );
-                                  // Mark as edit since user is restoring from history
-                                  setDescriptionChangeSource('edit');
-                                  setShowHistory(false);
-                                  toast.success('Description restored from history');
-                                }}
-                                className={`w-full text-left p-2 rounded-md hover:bg-muted transition-colors ${
-                                  isCurrentVersion ? 'bg-muted/50 border border-primary/20' : ''
-                                }`}
-                              >
-                                <div className="flex items-center justify-between gap-2">
-                                  <span className="text-xs font-medium">{sourceLabel}</span>
-                                  <span className="text-xs text-muted-foreground">
-                                    {formattedDate}
-                                  </span>
-                                </div>
-                                <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
-                                  {entry.description.slice(0, 100)}
-                                  {entry.description.length > 100 ? '...' : ''}
-                                </p>
-                                {isCurrentVersion && (
-                                  <span className="text-xs text-primary font-medium mt-1 block">
-                                    Current version
-                                  </span>
-                                )}
-                              </button>
-                            );
-                          })}
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-                )}
+                {/* Version History Button - uses local history for real-time updates */}
+                <EnhancementHistoryButton
+                  history={localHistory}
+                  currentValue={editingFeature.description}
+                  onRestore={(description) => {
+                    setEditingFeature((prev) => (prev ? { ...prev, description } : prev));
+                    setDescriptionChangeSource('edit');
+                  }}
+                  valueAccessor={(entry) => entry.description}
+                  title="Version History"
+                  restoreMessage="Description restored from history"
+                />
               </div>
               <DescriptionImageDropZone
                 value={editingFeature.description}
@@ -433,71 +325,40 @@ export function EditFeatureDialog({
               />
             </div>
 
-            {/* Collapsible Enhancement Section */}
-            <Collapsible open={enhanceOpen} onOpenChange={setEnhanceOpen}>
-              <CollapsibleTrigger asChild>
-                <button className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors w-full py-1">
-                  {enhanceOpen ? (
-                    <ChevronDown className="w-4 h-4" />
-                  ) : (
-                    <ChevronRight className="w-4 h-4" />
-                  )}
-                  <Sparkles className="w-4 h-4" />
-                  <span>Enhance with AI</span>
-                </button>
-              </CollapsibleTrigger>
-              <CollapsibleContent className="pt-3">
-                <div className="flex flex-wrap items-center gap-2 pl-6">
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="outline" size="sm" className="h-8 text-xs">
-                        {enhancementMode === 'improve' && 'Improve Clarity'}
-                        {enhancementMode === 'technical' && 'Add Technical Details'}
-                        {enhancementMode === 'simplify' && 'Simplify'}
-                        {enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
-                        <ChevronDown className="w-3 h-3 ml-1" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="start">
-                      <DropdownMenuItem onClick={() => setEnhancementMode('improve')}>
-                        Improve Clarity
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => setEnhancementMode('technical')}>
-                        Add Technical Details
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => setEnhancementMode('simplify')}>
-                        Simplify
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
-                        Add Acceptance Criteria
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
+            {/* Enhancement Section */}
+            <EnhanceWithAI
+              value={editingFeature.description}
+              onChange={(enhanced) =>
+                setEditingFeature((prev) => (prev ? { ...prev, description: enhanced } : prev))
+              }
+              onHistoryAdd={({ mode, originalText, enhancedText }) => {
+                setDescriptionChangeSource({ source: 'enhance', mode });
+                setPreEnhancementDescription(originalText);
 
-                  <Button
-                    type="button"
-                    variant="default"
-                    size="sm"
-                    className="h-8 text-xs"
-                    onClick={handleEnhanceDescription}
-                    disabled={!editingFeature.description.trim() || isEnhancing}
-                    loading={isEnhancing}
-                  >
-                    <Sparkles className="w-3 h-3 mr-1" />
-                    Enhance
-                  </Button>
-
-                  <ModelOverrideTrigger
-                    currentModelEntry={enhancementOverride.effectiveModelEntry}
-                    onModelChange={enhancementOverride.setOverride}
-                    phase="enhancementModel"
-                    isOverridden={enhancementOverride.isOverridden}
-                    size="sm"
-                    variant="icon"
-                  />
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
+                // Update local history for real-time display
+                const timestamp = new Date().toISOString();
+                setLocalHistory((prev) => {
+                  const newHistory = [...prev];
+                  // Add original text first (so user can restore to pre-enhancement state)
+                  const lastEntry = prev[prev.length - 1];
+                  if (!lastEntry || lastEntry.description !== originalText) {
+                    newHistory.push({
+                      description: originalText,
+                      timestamp,
+                      source: prev.length === 0 ? 'initial' : 'edit',
+                    });
+                  }
+                  // Add enhanced text
+                  newHistory.push({
+                    description: enhancedText,
+                    timestamp,
+                    source: 'enhance',
+                    enhancementMode: mode,
+                  });
+                  return newHistory;
+                });
+              }}
+            />
           </div>
 
           {/* AI & Execution Section */}

apps/ui/src/components/views/board-view/dialogs/follow-up-dialog.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { createLogger } from '@automaker/utils/logger';
 import {
   Dialog,
   DialogContent,
@@ -17,6 +18,21 @@ import {
 } from '@/components/ui/description-image-dropzone';
 import { MessageSquare } from 'lucide-react';
 import { Feature } from '@/store/app-store';
+import {
+  EnhanceWithAI,
+  EnhancementHistoryButton,
+  type EnhancementMode,
+  type BaseHistoryEntry,
+} from '../shared';
+
+const logger = createLogger('FollowUpDialog');
+
+/**
+ * A single entry in the follow-up prompt history
+ */
+export interface FollowUpHistoryEntry extends BaseHistoryEntry {
+  prompt: string;
+}
 
 interface FollowUpDialogProps {
   open: boolean;
@@ -30,6 +46,10 @@ interface FollowUpDialogProps {
   onPreviewMapChange: (map: ImagePreviewMap) => void;
   onSend: () => void;
   isMaximized: boolean;
+  /** History of prompt versions for restoration */
+  promptHistory?: FollowUpHistoryEntry[];
+  /** Callback to add a new entry to prompt history */
+  onHistoryAdd?: (entry: FollowUpHistoryEntry) => void;
 }
 
 export function FollowUpDialog({
@@ -44,9 +64,11 @@ export function FollowUpDialog({
   onPreviewMapChange,
   onSend,
   isMaximized,
+  promptHistory = [],
+  onHistoryAdd,
 }: FollowUpDialogProps) {
-  const handleClose = (open: boolean) => {
-    if (!open) {
+  const handleClose = (openState: boolean) => {
+    if (!openState) {
       onOpenChange(false);
     }
   };
@@ -77,7 +99,18 @@ export function FollowUpDialog({
         </DialogHeader>
         <div className="space-y-4 py-4 overflow-y-auto flex-1 min-h-0">
           <div className="space-y-2">
-            <Label htmlFor="follow-up-prompt">Instructions</Label>
+            <div className="flex items-center justify-between">
+              <Label htmlFor="follow-up-prompt">Instructions</Label>
+              {/* Version History Button */}
+              <EnhancementHistoryButton
+                history={promptHistory}
+                currentValue={prompt}
+                onRestore={onPromptChange}
+                valueAccessor={(entry) => entry.prompt}
+                title="Prompt History"
+                restoreMessage="Prompt restored from history"
+              />
+            </div>
             <DescriptionImageDropZone
               value={prompt}
               onChange={onPromptChange}
@@ -88,6 +121,33 @@ export function FollowUpDialog({
               onPreviewMapChange={onPreviewMapChange}
             />
           </div>
+
+          {/* Enhancement Section */}
+          <EnhanceWithAI
+            value={prompt}
+            onChange={onPromptChange}
+            onHistoryAdd={({ mode, originalText, enhancedText }) => {
+              const timestamp = new Date().toISOString();
+              // Add original text first (so user can restore to pre-enhancement state)
+              // Only add if it's different from the last history entry
+              const lastEntry = promptHistory[promptHistory.length - 1];
+              if (!lastEntry || lastEntry.prompt !== originalText) {
+                onHistoryAdd?.({
+                  prompt: originalText,
+                  timestamp,
+                  source: promptHistory.length === 0 ? 'initial' : 'edit',
+                });
+              }
+              // Add enhanced text
+              onHistoryAdd?.({
+                prompt: enhancedText,
+                timestamp,
+                source: 'enhance',
+                enhancementMode: mode,
+              });
+            }}
+          />
+
           <p className="text-xs text-muted-foreground">
             The agent will continue from where it left off, using the existing context. You can
             attach screenshots to help explain the issue.

apps/ui/src/components/views/board-view/dialogs/index.ts

@@ -5,6 +5,6 @@ export { CompletedFeaturesModal } from './completed-features-modal';
 export { ArchiveAllVerifiedDialog } from './archive-all-verified-dialog';
 export { DeleteCompletedFeatureDialog } from './delete-completed-feature-dialog';
 export { EditFeatureDialog } from './edit-feature-dialog';
-export { FollowUpDialog } from './follow-up-dialog';
+export { FollowUpDialog, type FollowUpHistoryEntry } from './follow-up-dialog';
 export { PlanApprovalDialog } from './plan-approval-dialog';
 export { MassEditDialog } from './mass-edit-dialog';

apps/ui/src/components/views/board-view/dialogs/pipeline-settings-dialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -8,223 +8,11 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Plus, Trash2, ChevronUp, ChevronDown, Upload, Pencil, X, FileText } from 'lucide-react';
+import { Plus, Trash2, ChevronUp, ChevronDown, Pencil } from 'lucide-react';
 import { toast } from 'sonner';
 import type { PipelineConfig, PipelineStep } from '@automaker/types';
 import { cn } from '@/lib/utils';
-
-// Color options for pipeline columns
-const COLOR_OPTIONS = [
-  { value: 'bg-blue-500/20', label: 'Blue', preview: 'bg-blue-500' },
-  { value: 'bg-purple-500/20', label: 'Purple', preview: 'bg-purple-500' },
-  { value: 'bg-green-500/20', label: 'Green', preview: 'bg-green-500' },
-  { value: 'bg-orange-500/20', label: 'Orange', preview: 'bg-orange-500' },
-  { value: 'bg-red-500/20', label: 'Red', preview: 'bg-red-500' },
-  { value: 'bg-pink-500/20', label: 'Pink', preview: 'bg-pink-500' },
-  { value: 'bg-cyan-500/20', label: 'Cyan', preview: 'bg-cyan-500' },
-  { value: 'bg-amber-500/20', label: 'Amber', preview: 'bg-amber-500' },
-  { value: 'bg-indigo-500/20', label: 'Indigo', preview: 'bg-indigo-500' },
-];
-
-// Pre-built step templates with well-designed prompts
-const STEP_TEMPLATES = [
-  {
-    id: 'code-review',
-    name: 'Code Review',
-    colorClass: 'bg-blue-500/20',
-    instructions: `## Code Review
-
-Please perform a thorough code review of the changes made in this feature. Focus on:
-
-### Code Quality
-- **Readability**: Is the code easy to understand? Are variable/function names descriptive?
-- **Maintainability**: Will this code be easy to modify in the future?
-- **DRY Principle**: Is there any duplicated code that should be abstracted?
-- **Single Responsibility**: Do functions and classes have a single, clear purpose?
-
-### Best Practices
-- Follow established patterns and conventions used in the codebase
-- Ensure proper error handling is in place
-- Check for appropriate logging where needed
-- Verify that magic numbers/strings are replaced with named constants
-
-### Performance
-- Identify any potential performance bottlenecks
-- Check for unnecessary re-renders (React) or redundant computations
-- Ensure efficient data structures are used
-
-### Testing
-- Verify that new code has appropriate test coverage
-- Check that edge cases are handled
-
-### Action Required
-After reviewing, make any necessary improvements directly. If you find issues:
-1. Fix them immediately if they are straightforward
-2. For complex issues, document them clearly with suggested solutions
-
-Provide a brief summary of changes made or issues found.`,
-  },
-  {
-    id: 'security-review',
-    name: 'Security Review',
-    colorClass: 'bg-red-500/20',
-    instructions: `## Security Review
-
-Perform a comprehensive security audit of the changes made in this feature. Check for vulnerabilities in the following areas:
-
-### Input Validation & Sanitization
-- Verify all user inputs are properly validated and sanitized
-- Check for SQL injection vulnerabilities
-- Check for XSS (Cross-Site Scripting) vulnerabilities
-- Ensure proper encoding of output data
-
-### Authentication & Authorization
-- Verify authentication checks are in place where needed
-- Ensure authorization logic correctly restricts access
-- Check for privilege escalation vulnerabilities
-- Verify session management is secure
-
-### Data Protection
-- Ensure sensitive data is not logged or exposed
-- Check that secrets/credentials are not hardcoded
-- Verify proper encryption is used for sensitive data
-- Check for secure transmission of data (HTTPS, etc.)
-
-### Common Vulnerabilities (OWASP Top 10)
-- Injection flaws
-- Broken authentication
-- Sensitive data exposure
-- XML External Entities (XXE)
-- Broken access control
-- Security misconfiguration
-- Cross-Site Scripting (XSS)
-- Insecure deserialization
-- Using components with known vulnerabilities
-- Insufficient logging & monitoring
-
-### Action Required
-1. Fix any security vulnerabilities immediately
-2. For complex security issues, document them with severity levels
-3. Add security-related comments where appropriate
-
-Provide a security assessment summary with any issues found and fixes applied.`,
-  },
-  {
-    id: 'testing',
-    name: 'Testing',
-    colorClass: 'bg-green-500/20',
-    instructions: `## Testing Step
-
-Please ensure comprehensive test coverage for the changes made in this feature.
-
-### Unit Tests
-- Write unit tests for all new functions and methods
-- Ensure edge cases are covered
-- Test error handling paths
-- Aim for high code coverage on new code
-
-### Integration Tests
-- Test interactions between components/modules
-- Verify API endpoints work correctly
-- Test database operations if applicable
-
-### Test Quality
-- Tests should be readable and well-documented
-- Each test should have a clear purpose
-- Use descriptive test names that explain the scenario
-- Follow the Arrange-Act-Assert pattern
-
-### Run Tests
-After writing tests, run the full test suite and ensure:
-1. All new tests pass
-2. No existing tests are broken
-3. Test coverage meets project standards
-
-Provide a summary of tests added and any issues found during testing.`,
-  },
-  {
-    id: 'documentation',
-    name: 'Documentation',
-    colorClass: 'bg-amber-500/20',
-    instructions: `## Documentation Step
-
-Please ensure all changes are properly documented.
-
-### Code Documentation
-- Add/update JSDoc or docstrings for new functions and classes
-- Document complex algorithms or business logic
-- Add inline comments for non-obvious code
-
-### API Documentation
-- Document any new or modified API endpoints
-- Include request/response examples
-- Document error responses
-
-### README Updates
-- Update README if new setup steps are required
-- Document any new environment variables
-- Update architecture diagrams if applicable
-
-### Changelog
-- Document notable changes for the changelog
-- Include breaking changes if any
-
-Provide a summary of documentation added or updated.`,
-  },
-  {
-    id: 'optimization',
-    name: 'Performance Optimization',
-    colorClass: 'bg-cyan-500/20',
-    instructions: `## Performance Optimization Step
-
-Review and optimize the performance of the changes made in this feature.
-
-### Code Performance
-- Identify and optimize slow algorithms (O(n²) → O(n log n), etc.)
-- Remove unnecessary computations or redundant operations
-- Optimize loops and iterations
-- Use appropriate data structures
-
-### Memory Usage
-- Check for memory leaks
-- Optimize memory-intensive operations
-- Ensure proper cleanup of resources
-
-### Database/API
-- Optimize database queries (add indexes, reduce N+1 queries)
-- Implement caching where appropriate
-- Batch API calls when possible
-
-### Frontend (if applicable)
-- Minimize bundle size
-- Optimize render performance
-- Implement lazy loading where appropriate
-- Use memoization for expensive computations
-
-### Action Required
-1. Profile the code to identify bottlenecks
-2. Apply optimizations
-3. Measure improvements
-
-Provide a summary of optimizations applied and performance improvements achieved.`,
-  },
-];
-
-// Helper to get template color class
-const getTemplateColorClass = (templateId: string): string => {
-  const template = STEP_TEMPLATES.find((t) => t.id === templateId);
-  return template?.colorClass || COLOR_OPTIONS[0].value;
-};
+import { AddEditPipelineStepDialog } from './add-edit-pipeline-step-dialog';
 
 interface PipelineSettingsDialogProps {
   open: boolean;
@@ -234,18 +22,10 @@ interface PipelineSettingsDialogProps {
   onSave: (config: PipelineConfig) => Promise<void>;
 }
 
-interface EditingStep {
-  id?: string;
-  name: string;
-  instructions: string;
-  colorClass: string;
-  order: number;
-}
-
 export function PipelineSettingsDialog({
   open,
   onClose,
-  projectPath,
+  projectPath: _projectPath,
   pipelineConfig,
   onSave,
 }: PipelineSettingsDialogProps) {
@@ -262,9 +42,11 @@ export function PipelineSettingsDialog({
   };
 
   const [steps, setSteps] = useState<PipelineStep[]>(() => validateSteps(pipelineConfig?.steps));
-  const [editingStep, setEditingStep] = useState<EditingStep | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Sub-dialog state
+  const [addEditDialogOpen, setAddEditDialogOpen] = useState(false);
+  const [editingStep, setEditingStep] = useState<PipelineStep | null>(null);
 
   // Sync steps when dialog opens or pipelineConfig changes
   useEffect(() => {
@@ -276,22 +58,13 @@ export function PipelineSettingsDialog({
   const sortedSteps = [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 
   const handleAddStep = () => {
-    setEditingStep({
-      name: '',
-      instructions: '',
-      colorClass: COLOR_OPTIONS[steps.length % COLOR_OPTIONS.length].value,
-      order: steps.length,
-    });
+    setEditingStep(null);
+    setAddEditDialogOpen(true);
   };
 
   const handleEditStep = (step: PipelineStep) => {
-    setEditingStep({
-      id: step.id,
-      name: step.name,
-      instructions: step.instructions,
-      colorClass: step.colorClass,
-      order: step.order,
-    });
+    setEditingStep(step);
+    setAddEditDialogOpen(true);
   };
 
   const handleDeleteStep = (stepId: string) => {
@@ -323,53 +96,21 @@ export function PipelineSettingsDialog({
     setSteps(newSteps);
   };
 
-  const handleFileUpload = () => {
-    fileInputRef.current?.click();
-  };
-
-  const handleFileInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    try {
-      const content = await file.text();
-      setEditingStep((prev) => (prev ? { ...prev, instructions: content } : null));
-      toast.success('Instructions loaded from file');
-    } catch (error) {
-      toast.error('Failed to load file');
-    }
-
-    // Reset the input so the same file can be selected again
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  };
-
-  const handleSaveStep = () => {
-    if (!editingStep) return;
-
-    if (!editingStep.name.trim()) {
-      toast.error('Step name is required');
-      return;
-    }
-
-    if (!editingStep.instructions.trim()) {
-      toast.error('Step instructions are required');
-      return;
-    }
-
+  const handleSaveStep = (
+    stepData: Omit<PipelineStep, 'id' | 'createdAt' | 'updatedAt'> & { id?: string }
+  ) => {
     const now = new Date().toISOString();
 
-    if (editingStep.id) {
+    if (stepData.id) {
       // Update existing step
       setSteps((prev) =>
         prev.map((s) =>
-          s.id === editingStep.id
+          s.id === stepData.id
             ? {
                 ...s,
-                name: editingStep.name,
-                instructions: editingStep.instructions,
-                colorClass: editingStep.colorClass,
+                name: stepData.name,
+                instructions: stepData.instructions,
+                colorClass: stepData.colorClass,
                 updatedAt: now,
               }
             : s
@@ -379,90 +120,21 @@ export function PipelineSettingsDialog({
       // Add new step
       const newStep: PipelineStep = {
         id: `step_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 8)}`,
-        name: editingStep.name,
-        instructions: editingStep.instructions,
-        colorClass: editingStep.colorClass,
+        name: stepData.name,
+        instructions: stepData.instructions,
+        colorClass: stepData.colorClass,
         order: steps.length,
         createdAt: now,
         updatedAt: now,
       };
       setSteps((prev) => [...prev, newStep]);
     }
-
-    setEditingStep(null);
   };
 
   const handleSaveConfig = async () => {
     setIsSubmitting(true);
     try {
-      // If the user is currently editing a step and clicks "Save Configuration",
-      // include that step in the config (common expectation) instead of silently dropping it.
-      let effectiveSteps = steps;
-      if (editingStep) {
-        if (!editingStep.name.trim()) {
-          toast.error('Step name is required');
-          return;
-        }
-
-        if (!editingStep.instructions.trim()) {
-          toast.error('Step instructions are required');
-          return;
-        }
-
-        const now = new Date().toISOString();
-        if (editingStep.id) {
-          // Update existing (or add if missing for some reason)
-          const existingIdx = effectiveSteps.findIndex((s) => s.id === editingStep.id);
-          if (existingIdx >= 0) {
-            effectiveSteps = effectiveSteps.map((s) =>
-              s.id === editingStep.id
-                ? {
-                    ...s,
-                    name: editingStep.name,
-                    instructions: editingStep.instructions,
-                    colorClass: editingStep.colorClass,
-                    updatedAt: now,
-                  }
-                : s
-            );
-          } else {
-            effectiveSteps = [
-              ...effectiveSteps,
-              {
-                id: editingStep.id,
-                name: editingStep.name,
-                instructions: editingStep.instructions,
-                colorClass: editingStep.colorClass,
-                order: effectiveSteps.length,
-                createdAt: now,
-                updatedAt: now,
-              },
-            ];
-          }
-        } else {
-          // Add new step
-          effectiveSteps = [
-            ...effectiveSteps,
-            {
-              id: `step_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 8)}`,
-              name: editingStep.name,
-              instructions: editingStep.instructions,
-              colorClass: editingStep.colorClass,
-              order: effectiveSteps.length,
-              createdAt: now,
-              updatedAt: now,
-            },
-          ];
-        }
-
-        // Keep local UI state consistent with what we are saving.
-        setSteps(effectiveSteps);
-        setEditingStep(null);
-      }
-
-      const sortedEffectiveSteps = [...effectiveSteps].sort(
-        (a, b) => (a.order ?? 0) - (b.order ?? 0)
-      );
+      const sortedEffectiveSteps = [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
       const config: PipelineConfig = {
         version: 1,
         steps: sortedEffectiveSteps.map((s, index) => ({ ...s, order: index })),
@@ -470,7 +142,7 @@ export function PipelineSettingsDialog({
       await onSave(config);
       toast.success('Pipeline configuration saved');
       onClose();
-    } catch (error) {
+    } catch {
       toast.error('Failed to save pipeline configuration');
     } finally {
       setIsSubmitting(false);
@@ -478,259 +150,121 @@ export function PipelineSettingsDialog({
   };
 
   return (
-    <Dialog open={open} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
-        {/* Hidden file input for loading instructions from .md files */}
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept=".md,.txt"
-          className="hidden"
-          onChange={handleFileInputChange}
-        />
-        <DialogHeader>
-          <DialogTitle>Pipeline Settings</DialogTitle>
-          <DialogDescription>
-            Configure custom pipeline steps that run after a feature completes "In Progress". Each
-            step will automatically prompt the agent with its instructions.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="flex-1 overflow-y-auto py-4 space-y-4">
-          {/* Steps List */}
-          {sortedSteps.length > 0 ? (
-            <div className="space-y-2">
-              {sortedSteps.map((step, index) => (
-                <div
-                  key={step.id}
-                  className="flex items-center gap-2 p-3 border rounded-lg bg-muted/30"
-                >
-                  <div className="flex flex-col gap-1">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-5 w-5"
-                      onClick={() => handleMoveStep(step.id, 'up')}
-                      disabled={index === 0}
-                    >
-                      <ChevronUp className="h-3 w-3" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-5 w-5"
-                      onClick={() => handleMoveStep(step.id, 'down')}
-                      disabled={index === sortedSteps.length - 1}
-                    >
-                      <ChevronDown className="h-3 w-3" />
-                    </Button>
-                  </div>
+    <>
+      <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+        <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle>Pipeline Settings</DialogTitle>
+            <DialogDescription>
+              Configure custom pipeline steps that run after a feature completes "In Progress". Each
+              step will automatically prompt the agent with its instructions.
+            </DialogDescription>
+          </DialogHeader>
 
+          <div className="flex-1 overflow-y-auto py-4 space-y-4">
+            {/* Steps List */}
+            {sortedSteps.length > 0 ? (
+              <div className="space-y-2">
+                {sortedSteps.map((step, index) => (
                   <div
-                    className={cn(
-                      'w-3 h-8 rounded',
-                      (step.colorClass || 'bg-blue-500/20').replace('/20', '')
-                    )}
-                  />
+                    key={step.id}
+                    className="flex items-center gap-2 p-3 border rounded-lg bg-muted/30"
+                  >
+                    <div className="flex flex-col gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-5 w-5"
+                        onClick={() => handleMoveStep(step.id, 'up')}
+                        disabled={index === 0}
+                      >
+                        <ChevronUp className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-5 w-5"
+                        onClick={() => handleMoveStep(step.id, 'down')}
+                        disabled={index === sortedSteps.length - 1}
+                      >
+                        <ChevronDown className="h-3 w-3" />
+                      </Button>
+                    </div>
 
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium truncate">{step.name || 'Unnamed Step'}</div>
-                    <div className="text-xs text-muted-foreground truncate">
-                      {(step.instructions || '').substring(0, 100)}
-                      {(step.instructions || '').length > 100 ? '...' : ''}
+                    <div
+                      className={cn(
+                        'w-3 h-8 rounded',
+                        (step.colorClass || 'bg-blue-500/20').replace('/20', '')
+                      )}
+                    />
+
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">{step.name || 'Unnamed Step'}</div>
+                      <div className="text-xs text-muted-foreground truncate">
+                        {(step.instructions || '').substring(0, 100)}
+                        {(step.instructions || '').length > 100 ? '...' : ''}
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        onClick={() => handleEditStep(step)}
+                      >
+                        <Pencil className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-destructive hover:text-destructive"
+                        onClick={() => handleDeleteStep(step.id)}
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
                     </div>
                   </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-muted-foreground">
+                <p>No pipeline steps configured.</p>
+                <p className="text-sm">
+                  Add steps to create a custom workflow after features complete.
+                </p>
+              </div>
+            )}
 
-                  <div className="flex items-center gap-1">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-7 w-7"
-                      onClick={() => handleEditStep(step)}
-                    >
-                      <Pencil className="h-3 w-3" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-7 w-7 text-destructive hover:text-destructive"
-                      onClick={() => handleDeleteStep(step.id)}
-                    >
-                      <Trash2 className="h-3 w-3" />
-                    </Button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <div className="text-center py-8 text-muted-foreground">
-              <p>No pipeline steps configured.</p>
-              <p className="text-sm">
-                Add steps to create a custom workflow after features complete.
-              </p>
-            </div>
-          )}
-
-          {/* Add Step Button */}
-          {!editingStep && (
+            {/* Add Step Button */}
             <Button variant="outline" className="w-full" onClick={handleAddStep}>
               <Plus className="h-4 w-4 mr-2" />
               Add Pipeline Step
             </Button>
-          )}
+          </div>
 
-          {/* Edit/Add Step Form */}
-          {editingStep && (
-            <div className="border rounded-lg p-4 space-y-4 bg-muted/20">
-              <div className="flex items-center justify-between">
-                <h4 className="font-medium">{editingStep.id ? 'Edit Step' : 'New Step'}</h4>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-6 w-6"
-                  onClick={() => setEditingStep(null)}
-                >
-                  <X className="h-4 w-4" />
-                </Button>
-              </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button onClick={handleSaveConfig} disabled={isSubmitting}>
+              {isSubmitting ? 'Saving...' : 'Save Pipeline'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
-              {/* Template Selector - only show for new steps */}
-              {!editingStep.id && (
-                <div className="space-y-2">
-                  <Label>Start from Template</Label>
-                  <Select
-                    onValueChange={(templateId) => {
-                      const template = STEP_TEMPLATES.find((t) => t.id === templateId);
-                      if (template) {
-                        setEditingStep((prev) =>
-                          prev
-                            ? {
-                                ...prev,
-                                name: template.name,
-                                instructions: template.instructions,
-                                colorClass: template.colorClass,
-                              }
-                            : null
-                        );
-                        toast.success(`Loaded "${template.name}" template`);
-                      }
-                    }}
-                  >
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="Choose a template (optional)" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {STEP_TEMPLATES.map((template) => (
-                        <SelectItem key={template.id} value={template.id}>
-                          <div className="flex items-center gap-2">
-                            <div
-                              className={cn(
-                                'w-2 h-2 rounded-full',
-                                template.colorClass.replace('/20', '')
-                              )}
-                            />
-                            {template.name}
-                          </div>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <p className="text-xs text-muted-foreground">
-                    Select a pre-built template to populate the form, or create your own from
-                    scratch.
-                  </p>
-                </div>
-              )}
-
-              <div className="space-y-2">
-                <Label htmlFor="step-name">Step Name</Label>
-                <Input
-                  id="step-name"
-                  placeholder="e.g., Code Review, Testing, Documentation"
-                  value={editingStep.name}
-                  onChange={(e) =>
-                    setEditingStep((prev) => (prev ? { ...prev, name: e.target.value } : null))
-                  }
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label>Color</Label>
-                <div className="flex flex-wrap gap-2">
-                  {COLOR_OPTIONS.map((color) => (
-                    <button
-                      key={color.value}
-                      type="button"
-                      className={cn(
-                        'w-8 h-8 rounded-full transition-all',
-                        color.preview,
-                        editingStep.colorClass === color.value
-                          ? 'ring-2 ring-offset-2 ring-primary'
-                          : 'opacity-60 hover:opacity-100'
-                      )}
-                      onClick={() =>
-                        setEditingStep((prev) =>
-                          prev ? { ...prev, colorClass: color.value } : null
-                        )
-                      }
-                      title={color.label}
-                    />
-                  ))}
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <Label htmlFor="step-instructions">Agent Instructions</Label>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 text-xs"
-                    onClick={handleFileUpload}
-                  >
-                    <Upload className="h-3 w-3 mr-1" />
-                    Load from .md file
-                  </Button>
-                </div>
-                <Textarea
-                  id="step-instructions"
-                  placeholder="Instructions for the agent to follow during this pipeline step..."
-                  value={editingStep.instructions}
-                  onChange={(e) =>
-                    setEditingStep((prev) =>
-                      prev ? { ...prev, instructions: e.target.value } : null
-                    )
-                  }
-                  rows={6}
-                  className="font-mono text-sm"
-                />
-              </div>
-
-              <div className="flex justify-end gap-2">
-                <Button variant="outline" onClick={() => setEditingStep(null)}>
-                  Cancel
-                </Button>
-                <Button onClick={handleSaveStep}>
-                  {editingStep.id ? 'Update Step' : 'Add Step'}
-                </Button>
-              </div>
-            </div>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button onClick={handleSaveConfig} disabled={isSubmitting}>
-            {isSubmitting
-              ? 'Saving...'
-              : editingStep
-                ? 'Save Step & Configuration'
-                : 'Save Configuration'}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+      {/* Sub-dialog for adding/editing steps */}
+      <AddEditPipelineStepDialog
+        open={addEditDialogOpen}
+        onClose={() => {
+          setAddEditDialogOpen(false);
+          setEditingStep(null);
+        }}
+        onSave={handleSaveStep}
+        existingStep={editingStep}
+        defaultOrder={steps.length}
+      />
+    </>
   );
 }

apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/code-review.ts

@@ -0,0 +1,94 @@
+export const codeReviewTemplate = {
+  id: 'code-review',
+  name: 'Code Review',
+  colorClass: 'bg-blue-500/20',
+  instructions: `## Code Review & Update
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE ⚠️
+
+**THIS IS NOT OPTIONAL. AFTER REVIEWING, YOU MUST MODIFY THE CODE WITH YOUR FINDINGS.**
+
+This step has TWO mandatory phases:
+1. **REVIEW** the code (identify issues)
+2. **UPDATE** the code (fix the issues you found)
+
+**You cannot complete this step by only reviewing. You MUST make code changes based on your review findings.**
+
+---
+
+### Phase 1: Review Phase
+Perform a thorough code review of the changes made in this feature. Focus on:
+
+#### Code Quality
+- **Readability**: Is the code easy to understand? Are variable/function names descriptive?
+- **Maintainability**: Will this code be easy to modify in the future?
+- **DRY Principle**: Is there any duplicated code that should be abstracted?
+- **Single Responsibility**: Do functions and classes have a single, clear purpose?
+
+#### Best Practices
+- Follow established patterns and conventions used in the codebase
+- Ensure proper error handling is in place
+- Check for appropriate logging where needed
+- Verify that magic numbers/strings are replaced with named constants
+
+#### Performance
+- Identify any potential performance bottlenecks
+- Check for unnecessary re-renders (React) or redundant computations
+- Ensure efficient data structures are used
+
+#### Testing
+- Verify that new code has appropriate test coverage
+- Check that edge cases are handled
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW MODIFY THE CODE BASED ON YOUR REVIEW FINDINGS.**
+
+**This is not optional. Every issue you identify must be addressed with code changes.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Fix Issues Immediately**: For every issue you found during review:
+   - ✅ Refactor code for better readability
+   - ✅ Extract duplicated code into reusable functions
+   - ✅ Improve variable/function names for clarity
+   - ✅ Add missing error handling
+   - ✅ Replace magic numbers/strings with named constants
+   - ✅ Optimize performance bottlenecks
+   - ✅ Fix any code quality issues you identify
+   - ✅ **MAKE THE ACTUAL CODE CHANGES - DO NOT JUST DOCUMENT THEM**
+
+2. **Apply All Improvements**: Don't just identify problems - fix them in code:
+   - ✅ Improve code structure and organization
+   - ✅ Enhance error handling and logging
+   - ✅ Optimize performance where possible
+   - ✅ Ensure consistency with codebase patterns
+   - ✅ Add or improve comments where needed
+   - ✅ **MODIFY THE FILES DIRECTLY WITH YOUR IMPROVEMENTS**
+
+3. **For Complex Issues**: If you encounter issues that require significant refactoring:
+   - ✅ Make the improvements you can make safely
+   - ✅ Document remaining issues with clear explanations
+   - ✅ Provide specific suggestions for future improvements
+   - ✅ **STILL MAKE AS MANY CODE CHANGES AS POSSIBLE**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of issues found during review
+- **A detailed list of ALL code changes and improvements made (this proves you updated the code)**
+- Any remaining issues that need attention (if applicable)
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Reviewing without updating is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST modify the code files directly with your improvements.**
+**You MUST show evidence of code changes in your summary.**
+**This step is only complete when code has been updated.**`,
+};

apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/documentation.ts

@@ -0,0 +1,77 @@
+export const documentationTemplate = {
+  id: 'documentation',
+  name: 'Documentation',
+  colorClass: 'bg-amber-500/20',
+  instructions: `## Documentation Step
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE WITH DOCUMENTATION ⚠️
+
+**THIS IS NOT OPTIONAL. YOU MUST ADD/UPDATE DOCUMENTATION IN THE CODEBASE.**
+
+This step requires you to:
+1. **REVIEW** what needs documentation
+2. **UPDATE** the code by adding/updating documentation files and code comments
+
+**You cannot complete this step by only identifying what needs documentation. You MUST add the documentation directly to the codebase.**
+
+---
+
+### Phase 1: Review Phase
+Identify what documentation is needed:
+
+- Review new functions, classes, and modules
+- Identify new or modified API endpoints
+- Check for missing README updates
+- Identify changelog entries needed
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW ADD/UPDATE DOCUMENTATION IN THE CODEBASE.**
+
+**This is not optional. You must modify files to add documentation.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Code Documentation** - UPDATE THE CODE FILES:
+   - ✅ Add/update JSDoc or docstrings for new functions and classes
+   - ✅ Document complex algorithms or business logic
+   - ✅ Add inline comments for non-obvious code
+   - ✅ **MODIFY THE SOURCE FILES DIRECTLY WITH DOCUMENTATION**
+
+2. **API Documentation** - UPDATE API DOCUMENTATION FILES:
+   - ✅ Document any new or modified API endpoints
+   - ✅ Include request/response examples
+   - ✅ Document error responses
+   - ✅ **UPDATE THE API DOCUMENTATION FILES DIRECTLY**
+
+3. **README Updates** - UPDATE THE README FILE:
+   - ✅ Update README if new setup steps are required
+   - ✅ Document any new environment variables
+   - ✅ Update architecture diagrams if applicable
+   - ✅ **MODIFY THE README FILE DIRECTLY**
+
+4. **Changelog** - UPDATE THE CHANGELOG FILE:
+   - ✅ Document notable changes for the changelog
+   - ✅ Include breaking changes if any
+   - ✅ **UPDATE THE CHANGELOG FILE DIRECTLY**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of documentation needs identified
+- **A detailed list of ALL documentation files and code comments added/updated (this proves you updated the code)**
+- Specific files modified with documentation
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Identifying documentation needs without adding documentation is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST modify the code files directly to add documentation.**
+**You MUST show evidence of documentation changes in your summary.**
+**This step is only complete when documentation has been added to the codebase.**`,
+};

apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/index.ts

@@ -0,0 +1,28 @@
+import { codeReviewTemplate } from './code-review';
+import { securityReviewTemplate } from './security-review';
+import { uxReviewTemplate } from './ux-review';
+import { testingTemplate } from './testing';
+import { documentationTemplate } from './documentation';
+import { optimizationTemplate } from './optimization';
+
+export interface PipelineStepTemplate {
+  id: string;
+  name: string;
+  colorClass: string;
+  instructions: string;
+}
+
+export const STEP_TEMPLATES: PipelineStepTemplate[] = [
+  codeReviewTemplate,
+  securityReviewTemplate,
+  uxReviewTemplate,
+  testingTemplate,
+  documentationTemplate,
+  optimizationTemplate,
+];
+
+// Helper to get template color class
+export const getTemplateColorClass = (templateId: string): string => {
+  const template = STEP_TEMPLATES.find((t) => t.id === templateId);
+  return template?.colorClass || 'bg-blue-500/20';
+};

apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/optimization.ts

@@ -0,0 +1,103 @@
+export const optimizationTemplate = {
+  id: 'optimization',
+  name: 'Performance',
+  colorClass: 'bg-cyan-500/20',
+  instructions: `## Performance Optimization Step
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE WITH OPTIMIZATIONS ⚠️
+
+**THIS IS NOT OPTIONAL. AFTER IDENTIFYING OPTIMIZATION OPPORTUNITIES, YOU MUST UPDATE THE CODE.**
+
+This step has TWO mandatory phases:
+1. **REVIEW** the code for performance issues (identify bottlenecks)
+2. **UPDATE** the code with optimizations (fix the performance issues)
+
+**You cannot complete this step by only identifying performance issues. You MUST modify the code to optimize it.**
+
+---
+
+### Phase 1: Review Phase
+Identify performance bottlenecks and optimization opportunities:
+
+#### Code Performance
+- Identify slow algorithms (O(n²) → O(n log n), etc.)
+- Find unnecessary computations or redundant operations
+- Identify inefficient loops and iterations
+- Check for inappropriate data structures
+
+#### Memory Usage
+- Check for memory leaks
+- Identify memory-intensive operations
+- Check for proper cleanup of resources
+
+#### Database/API
+- Identify slow database queries (N+1 queries, missing indexes)
+- Find opportunities for caching
+- Identify API calls that could be batched
+
+#### Frontend (if applicable)
+- Identify bundle size issues
+- Find render performance problems
+- Identify opportunities for lazy loading
+- Find expensive computations that need memoization
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW MODIFY THE CODE TO APPLY OPTIMIZATIONS.**
+
+**This is not optional. Every performance issue you identify must be addressed with code changes.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Optimize Code Performance** - UPDATE THE CODE:
+   - ✅ Optimize slow algorithms (O(n²) → O(n log n), etc.)
+   - ✅ Remove unnecessary computations or redundant operations
+   - ✅ Optimize loops and iterations
+   - ✅ Use appropriate data structures
+   - ✅ **MODIFY THE SOURCE FILES DIRECTLY WITH OPTIMIZATIONS**
+
+2. **Fix Memory Issues** - UPDATE THE CODE:
+   - ✅ Fix memory leaks
+   - ✅ Optimize memory-intensive operations
+   - ✅ Ensure proper cleanup of resources
+   - ✅ **MAKE THE ACTUAL CODE CHANGES**
+
+3. **Optimize Database/API** - UPDATE THE CODE:
+   - ✅ Optimize database queries (add indexes, reduce N+1 queries)
+   - ✅ Implement caching where appropriate
+   - ✅ Batch API calls when possible
+   - ✅ **MODIFY THE DATABASE/API CODE DIRECTLY**
+
+4. **Optimize Frontend** (if applicable) - UPDATE THE CODE:
+   - ✅ Minimize bundle size
+   - ✅ Optimize render performance
+   - ✅ Implement lazy loading where appropriate
+   - ✅ Use memoization for expensive computations
+   - ✅ **MODIFY THE FRONTEND CODE DIRECTLY**
+
+5. **Profile and Measure**:
+   - ✅ Profile the code to verify bottlenecks are fixed
+   - ✅ Measure improvements achieved
+   - ✅ **DOCUMENT THE PERFORMANCE IMPROVEMENTS**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of performance issues identified
+- **A detailed list of ALL optimizations applied to the code (this proves you updated the code)**
+- Performance improvements achieved (with metrics if possible)
+- Any remaining optimization opportunities
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Identifying performance issues without optimizing the code is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST modify the code files directly with optimizations.**
+**You MUST show evidence of optimization changes in your summary.**
+**This step is only complete when code has been optimized.**`,
+};

apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/security-review.ts

@@ -0,0 +1,114 @@
+export const securityReviewTemplate = {
+  id: 'security-review',
+  name: 'Security Review',
+  colorClass: 'bg-red-500/20',
+  instructions: `## Security Review & Update
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE TO FIX SECURITY ISSUES ⚠️
+
+**THIS IS NOT OPTIONAL. AFTER REVIEWING FOR SECURITY ISSUES, YOU MUST FIX THEM IN THE CODE.**
+
+This step has TWO mandatory phases:
+1. **REVIEW** the code for security vulnerabilities (identify issues)
+2. **UPDATE** the code to fix vulnerabilities (secure the code)
+
+**You cannot complete this step by only identifying security issues. You MUST modify the code to fix them.**
+
+**Security vulnerabilities left unfixed are unacceptable. You must address them with code changes.**
+
+---
+
+### Phase 1: Review Phase
+Perform a comprehensive security audit of the changes made in this feature. Check for vulnerabilities in the following areas:
+
+#### Input Validation & Sanitization
+- Verify all user inputs are properly validated and sanitized
+- Check for SQL injection vulnerabilities
+- Check for XSS (Cross-Site Scripting) vulnerabilities
+- Ensure proper encoding of output data
+
+#### Authentication & Authorization
+- Verify authentication checks are in place where needed
+- Ensure authorization logic correctly restricts access
+- Check for privilege escalation vulnerabilities
+- Verify session management is secure
+
+#### Data Protection
+- Ensure sensitive data is not logged or exposed
+- Check that secrets/credentials are not hardcoded
+- Verify proper encryption is used for sensitive data
+- Check for secure transmission of data (HTTPS, etc.)
+
+#### Common Vulnerabilities (OWASP Top 10)
+- Injection flaws
+- Broken authentication
+- Sensitive data exposure
+- XML External Entities (XXE)
+- Broken access control
+- Security misconfiguration
+- Cross-Site Scripting (XSS)
+- Insecure deserialization
+- Using components with known vulnerabilities
+- Insufficient logging & monitoring
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW MODIFY THE CODE TO FIX ALL SECURITY VULNERABILITIES.**
+
+**This is not optional. Every security issue you identify must be fixed with code changes.**
+
+**Security vulnerabilities cannot be left unfixed. You must address them immediately.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Fix Vulnerabilities Immediately** - UPDATE THE CODE:
+   - ✅ Add input validation and sanitization where missing
+   - ✅ Fix SQL injection vulnerabilities by using parameterized queries
+   - ✅ Fix XSS vulnerabilities by properly encoding output
+   - ✅ Add authentication/authorization checks where needed
+   - ✅ Remove hardcoded secrets and credentials
+   - ✅ Implement proper encryption for sensitive data
+   - ✅ Fix broken access control
+   - ✅ Add security headers and configurations
+   - ✅ Fix any other security vulnerabilities you find
+   - ✅ **MODIFY THE SOURCE FILES DIRECTLY TO FIX SECURITY ISSUES**
+
+2. **Apply Security Best Practices** - UPDATE THE CODE:
+   - ✅ Implement proper input validation on all user inputs
+   - ✅ Ensure all outputs are properly encoded
+   - ✅ Add authentication checks to protected routes/endpoints
+   - ✅ Implement proper authorization logic
+   - ✅ Remove or secure any exposed sensitive data
+   - ✅ Add security logging and monitoring
+   - ✅ Update dependencies with known vulnerabilities
+   - ✅ **MAKE THE ACTUAL CODE CHANGES - DO NOT JUST DOCUMENT THEM**
+
+3. **For Complex Security Issues** - UPDATE THE CODE:
+   - ✅ Fix what you can fix safely
+   - ✅ Document critical security issues with severity levels
+   - ✅ Provide specific remediation steps for complex issues
+   - ✅ Add security-related comments explaining protections in place
+   - ✅ **STILL MAKE AS MANY SECURITY FIXES AS POSSIBLE**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A security assessment summary of vulnerabilities found
+- **A detailed list of ALL security fixes applied to the code (this proves you updated the code)**
+- Any remaining security concerns that need attention (if applicable)
+- Severity levels for any unfixed issues
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Reviewing security without fixing vulnerabilities is INCOMPLETE, UNACCEPTABLE, and DANGEROUS.**
+
+**You MUST modify the code files directly to fix security issues.**
+**You MUST show evidence of security fixes in your summary.**
+**This step is only complete when security vulnerabilities have been fixed in the code.**
+**Security issues cannot be left as documentation - they must be fixed.**`,
+};

apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/testing.ts

@@ -0,0 +1,81 @@
+export const testingTemplate = {
+  id: 'testing',
+  name: 'Testing',
+  colorClass: 'bg-green-500/20',
+  instructions: `## Testing Step
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODEBASE WITH TESTS ⚠️
+
+**THIS IS NOT OPTIONAL. YOU MUST WRITE AND ADD TESTS TO THE CODEBASE.**
+
+This step requires you to:
+1. **REVIEW** what needs testing
+2. **UPDATE** the codebase by writing and adding test files
+
+**You cannot complete this step by only identifying what needs testing. You MUST create test files and write tests.**
+
+---
+
+### Phase 1: Review Phase
+Identify what needs test coverage:
+
+- Review new functions, methods, and classes
+- Identify new API endpoints
+- Check for edge cases that need testing
+- Identify integration points that need testing
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW WRITE AND ADD TESTS TO THE CODEBASE.**
+
+**This is not optional. You must create test files and write actual test code.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Write Unit Tests** - CREATE TEST FILES:
+   - ✅ Write unit tests for all new functions and methods
+   - ✅ Ensure edge cases are covered
+   - ✅ Test error handling paths
+   - ✅ Aim for high code coverage on new code
+   - ✅ **CREATE TEST FILES AND WRITE THE ACTUAL TEST CODE**
+
+2. **Write Integration Tests** - CREATE TEST FILES:
+   - ✅ Test interactions between components/modules
+   - ✅ Verify API endpoints work correctly
+   - ✅ Test database operations if applicable
+   - ✅ **CREATE INTEGRATION TEST FILES AND WRITE THE ACTUAL TEST CODE**
+
+3. **Ensure Test Quality** - WRITE QUALITY TESTS:
+   - ✅ Tests should be readable and well-documented
+   - ✅ Each test should have a clear purpose
+   - ✅ Use descriptive test names that explain the scenario
+   - ✅ Follow the Arrange-Act-Assert pattern
+   - ✅ **WRITE COMPLETE, FUNCTIONAL TESTS**
+
+4. **Run Tests** - VERIFY TESTS WORK:
+   - ✅ Run the full test suite and ensure all new tests pass
+   - ✅ Verify no existing tests are broken
+   - ✅ Check that test coverage meets project standards
+   - ✅ **FIX ANY FAILING TESTS**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of testing needs identified
+- **A detailed list of ALL test files created and tests written (this proves you updated the codebase)**
+- Test coverage metrics achieved
+- Any issues found during testing and how they were resolved
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Identifying what needs testing without writing tests is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST create test files and write actual test code.**
+**You MUST show evidence of test files created in your summary.**
+**This step is only complete when tests have been written and added to the codebase.**`,
+};

apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/ux-review.ts

@@ -0,0 +1,116 @@
+export const uxReviewTemplate = {
+  id: 'ux-reviewer',
+  name: 'User Experience',
+  colorClass: 'bg-purple-500/20',
+  instructions: `## User Experience Review & Update
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE TO IMPROVE UX ⚠️
+
+**THIS IS NOT OPTIONAL. AFTER REVIEWING THE USER EXPERIENCE, YOU MUST UPDATE THE CODE.**
+
+This step has TWO mandatory phases:
+1. **REVIEW** the user experience (identify UX issues)
+2. **UPDATE** the code to improve UX (fix the issues you found)
+
+**You cannot complete this step by only reviewing UX. You MUST modify the code to improve the user experience.**
+
+---
+
+### Phase 1: Review Phase
+Review the changes made in this feature from a user experience and design perspective. Focus on creating an exceptional user experience.
+
+#### User-Centered Design
+- **User Goals**: Does this feature solve a real user problem?
+- **Clarity**: Is the interface clear and easy to understand?
+- **Simplicity**: Can the feature be simplified without losing functionality?
+- **Consistency**: Does it follow existing design patterns and conventions?
+
+#### Visual Design & Hierarchy
+- **Layout**: Is the visual hierarchy clear? Does important information stand out?
+- **Spacing**: Is there appropriate whitespace and grouping?
+- **Typography**: Is text readable with proper sizing and contrast?
+- **Color**: Does color usage support functionality and meet accessibility standards?
+
+#### Accessibility (WCAG 2.1)
+- **Keyboard Navigation**: Can all functionality be accessed via keyboard?
+- **Screen Readers**: Are ARIA labels and semantic HTML used appropriately?
+- **Color Contrast**: Does text meet WCAG AA standards (4.5:1 for body, 3:1 for large)?
+- **Focus Indicators**: Are focus states visible and clear?
+- **Touch Targets**: Are interactive elements at least 44x44px on mobile?
+
+#### Responsive Design
+- **Mobile Experience**: Does it work well on small screens?
+- **Touch Targets**: Are buttons and links easy to tap?
+- **Content Adaptation**: Does content adapt appropriately to different screen sizes?
+- **Navigation**: Is navigation accessible and intuitive on mobile?
+
+#### User Feedback & States
+- **Loading States**: Are loading indicators shown for async operations?
+- **Error States**: Are error messages clear and actionable?
+- **Empty States**: Do empty states guide users on what to do next?
+- **Success States**: Are successful actions clearly confirmed?
+
+#### Performance & Perceived Performance
+- **Loading Speed**: Does the feature load quickly?
+- **Skeleton Screens**: Are skeleton screens used for better perceived performance?
+- **Optimistic Updates**: Can optimistic UI updates improve perceived speed?
+- **Micro-interactions**: Do animations and transitions enhance the experience?
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW MODIFY THE CODE TO IMPROVE THE USER EXPERIENCE.**
+
+**This is not optional. Every UX issue you identify must be addressed with code changes.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Fix UX Issues Immediately** - UPDATE THE CODE:
+   - ✅ Improve visual hierarchy and layout
+   - ✅ Fix spacing and typography issues
+   - ✅ Add missing ARIA labels and semantic HTML
+   - ✅ Fix color contrast issues
+   - ✅ Add or improve focus indicators
+   - ✅ Ensure touch targets meet size requirements
+   - ✅ Add missing loading, error, empty, and success states
+   - ✅ Improve responsive design for mobile
+   - ✅ Add keyboard navigation support
+   - ✅ Fix any accessibility issues
+   - ✅ **MODIFY THE UI COMPONENT FILES DIRECTLY WITH UX IMPROVEMENTS**
+
+2. **Apply UX Improvements** - UPDATE THE CODE:
+   - ✅ Refactor components for better clarity and simplicity
+   - ✅ Improve visual design and spacing
+   - ✅ Enhance accessibility features
+   - ✅ Add user feedback mechanisms (loading, error, success states)
+   - ✅ Optimize for mobile and responsive design
+   - ✅ Improve micro-interactions and animations
+   - ✅ Ensure consistency with design system
+   - ✅ **MAKE THE ACTUAL CODE CHANGES - DO NOT JUST DOCUMENT THEM**
+
+3. **For Complex UX Issues** - UPDATE THE CODE:
+   - ✅ Make the improvements you can make safely
+   - ✅ Document UX considerations and recommendations
+   - ✅ Provide specific suggestions for major UX improvements
+   - ✅ **STILL MAKE AS MANY UX IMPROVEMENTS AS POSSIBLE**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of UX issues found during review
+- **A detailed list of ALL UX improvements made to the code (this proves you updated the code)**
+- Any remaining UX considerations that need attention (if applicable)
+- Recommendations for future UX enhancements
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Reviewing UX without updating the code is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST modify the UI component files directly with UX improvements.**
+**You MUST show evidence of UX code changes in your summary.**
+**This step is only complete when code has been updated to improve the user experience.**`,
+};