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

2026-02-02 08:33:36 +00:00 · 2026-01-11 20:08:19 +01:00
parent 4a59e901e6 43fc3de2e1
commit 6e13cdd516
118 changed files with 6327 additions and 1795 deletions
--- a/apps/ui/src/components/views/board-view/board-controls.tsx
+++ b/apps/ui/src/components/views/board-view/board-controls.tsx
@@ -1,16 +1,12 @@
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { ImageIcon, Archive, Columns3, Network } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { BoardViewMode } from '@/store/app-store';
+import { ImageIcon, Archive } from 'lucide-react';

 interface BoardControlsProps {
  isMounted: boolean;
  onShowBoardBackground: () => void;
  onShowCompletedModal: () => void;
  completedCount: number;
-  boardViewMode: BoardViewMode;
-  onBoardViewModeChange: (mode: BoardViewMode) => void;
 }

 export function BoardControls({
@@ -18,59 +14,12 @@ export function BoardControls({
  onShowBoardBackground,
  onShowCompletedModal,
  completedCount,
-  boardViewMode,
-  onBoardViewModeChange,
 }: BoardControlsProps) {
  if (!isMounted) return null;

  return (
    <TooltipProvider>
-      <div className="flex items-center gap-2 ml-4">
-        {/* View Mode Toggle - Kanban / Graph */}
-        <div
-          className="flex items-center rounded-lg bg-secondary border border-border"
-          data-testid="view-mode-toggle"
-        >
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => onBoardViewModeChange('kanban')}
-                className={cn(
-                  'p-2 rounded-l-lg transition-colors',
-                  boardViewMode === 'kanban'
-                    ? 'bg-brand-500/20 text-brand-500'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-                )}
-                data-testid="view-mode-kanban"
-              >
-                <Columns3 className="w-4 h-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Kanban Board View</p>
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => onBoardViewModeChange('graph')}
-                className={cn(
-                  'p-2 rounded-r-lg transition-colors',
-                  boardViewMode === 'graph'
-                    ? 'bg-brand-500/20 text-brand-500'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-                )}
-                data-testid="view-mode-graph"
-              >
-                <Network className="w-4 h-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Dependency Graph View</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-
+      <div className="flex items-center gap-2">
        {/* Board Background Button */}
        <Tooltip>
          <TooltipTrigger asChild>
--- a/apps/ui/src/components/views/board-view/board-header.tsx
+++ b/apps/ui/src/components/views/board-view/board-header.tsx
@@ -10,9 +10,10 @@ import { useAppStore } from '@/store/app-store';
 import { useSetupStore } from '@/store/setup-store';
 import { AutoModeSettingsDialog } from './dialogs/auto-mode-settings-dialog';
 import { getHttpApiClient } from '@/lib/http-api-client';
+import { BoardSearchBar } from './board-search-bar';
+import { BoardControls } from './board-controls';

 interface BoardHeaderProps {
-  projectName: string;
  projectPath: string;
  maxConcurrency: number;
  runningAgentsCount: number;
@@ -21,6 +22,15 @@ interface BoardHeaderProps {
  onAutoModeToggle: (enabled: boolean) => void;
  onOpenPlanDialog: () => void;
  isMounted: boolean;
+  // Search bar props
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  isCreatingSpec: boolean;
+  creatingSpecProjectPath?: string;
+  // Board controls props
+  onShowBoardBackground: () => void;
+  onShowCompletedModal: () => void;
+  completedCount: number;
 }

 // Shared styles for header control containers
@@ -28,7 +38,6 @@ const controlContainerClass =
  'flex items-center gap-1.5 px-3 h-8 rounded-md bg-secondary border border-border';

 export function BoardHeader({
-  projectName,
  projectPath,
  maxConcurrency,
  runningAgentsCount,
@@ -37,6 +46,13 @@ export function BoardHeader({
  onAutoModeToggle,
  onOpenPlanDialog,
  isMounted,
+  searchQuery,
+  onSearchChange,
+  isCreatingSpec,
+  creatingSpecProjectPath,
+  onShowBoardBackground,
+  onShowCompletedModal,
+  completedCount,
 }: BoardHeaderProps) {
  const [showAutoModeSettings, setShowAutoModeSettings] = useState(false);
  const apiKeys = useAppStore((state) => state.apiKeys);
@@ -84,9 +100,20 @@ export function BoardHeader({

  return (
    <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
-      <div>
-        <h1 className="text-xl font-bold">Kanban Board</h1>
-        <p className="text-sm text-muted-foreground">{projectName}</p>
+      <div className="flex items-center gap-4">
+        <BoardSearchBar
+          searchQuery={searchQuery}
+          onSearchChange={onSearchChange}
+          isCreatingSpec={isCreatingSpec}
+          creatingSpecProjectPath={creatingSpecProjectPath}
+          currentProjectPath={projectPath}
+        />
+        <BoardControls
+          isMounted={isMounted}
+          onShowBoardBackground={onShowBoardBackground}
+          onShowCompletedModal={onShowCompletedModal}
+          completedCount={completedCount}
+        />
      </div>
      <div className="flex gap-2 items-center">
        {/* Usage Popover - show if either provider is authenticated */}
--- a/apps/ui/src/components/views/board-view/components/kanban-card/agent-info-panel.tsx
+++ b/apps/ui/src/components/views/board-view/components/kanban-card/agent-info-panel.tsx
@@ -70,6 +70,7 @@ export function AgentInfoPanel({
 }: AgentInfoPanelProps) {
  const [agentInfo, setAgentInfo] = useState<AgentTaskInfo | null>(null);
  const [isSummaryDialogOpen, setIsSummaryDialogOpen] = useState(false);
+  const [isTodosExpanded, setIsTodosExpanded] = useState(false);

  useEffect(() => {
    const loadContext = async () => {
@@ -197,32 +198,47 @@ export function AgentInfoPanel({
                  {agentInfo.todos.length} tasks
                </span>
              </div>
-              <div className="space-y-0.5 max-h-16 overflow-y-auto">
-                {agentInfo.todos.slice(0, 3).map((todo, idx) => (
-                  <div key={idx} className="flex items-center gap-1.5 text-[10px]">
-                    {todo.status === 'completed' ? (
-                      <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)] shrink-0" />
-                    ) : todo.status === 'in_progress' ? (
-                      <Loader2 className="w-2.5 h-2.5 text-[var(--status-warning)] animate-spin shrink-0" />
-                    ) : (
-                      <Circle className="w-2.5 h-2.5 text-muted-foreground/50 shrink-0" />
-                    )}
-                    <span
-                      className={cn(
-                        'break-words hyphens-auto line-clamp-2 leading-relaxed',
-                        todo.status === 'completed' && 'text-muted-foreground/60 line-through',
-                        todo.status === 'in_progress' && 'text-[var(--status-warning)]',
-                        todo.status === 'pending' && 'text-muted-foreground/80'
+              <div
+                className={cn(
+                  'space-y-0.5 overflow-y-auto',
+                  isTodosExpanded ? 'max-h-40' : 'max-h-16'
+                )}
+              >
+                {(isTodosExpanded ? agentInfo.todos : agentInfo.todos.slice(0, 3)).map(
+                  (todo, idx) => (
+                    <div key={idx} className="flex items-center gap-1.5 text-[10px]">
+                      {todo.status === 'completed' ? (
+                        <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)] shrink-0" />
+                      ) : todo.status === 'in_progress' ? (
+                        <Loader2 className="w-2.5 h-2.5 text-[var(--status-warning)] animate-spin shrink-0" />
+                      ) : (
+                        <Circle className="w-2.5 h-2.5 text-muted-foreground/50 shrink-0" />
                      )}
-                    >
-                      {todo.content}
-                    </span>
-                  </div>
-                ))}
+                      <span
+                        className={cn(
+                          'break-words hyphens-auto line-clamp-2 leading-relaxed',
+                          todo.status === 'completed' && 'text-muted-foreground/60 line-through',
+                          todo.status === 'in_progress' && 'text-[var(--status-warning)]',
+                          todo.status === 'pending' && 'text-muted-foreground/80'
+                        )}
+                      >
+                        {todo.content}
+                      </span>
+                    </div>
+                  )
+                )}
                {agentInfo.todos.length > 3 && (
-                  <p className="text-[10px] text-muted-foreground/60 pl-4">
-                    +{agentInfo.todos.length - 3} more
-                  </p>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setIsTodosExpanded(!isTodosExpanded);
+                    }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    onMouseDown={(e) => e.stopPropagation()}
+                    className="text-[10px] text-muted-foreground/60 pl-4 hover:text-muted-foreground transition-colors cursor-pointer"
+                  >
+                    {isTodosExpanded ? 'Show less' : `+${agentInfo.todos.length - 3} more`}
+                  </button>
                )}
              </div>
            </div>
--- a/apps/ui/src/components/views/board-view/components/kanban-card/summary-dialog.tsx
+++ b/apps/ui/src/components/views/board-view/components/kanban-card/summary-dialog.tsx
@@ -35,6 +35,7 @@ export function SummaryDialog({
        data-testid={`summary-dialog-${feature.id}`}
        onPointerDown={(e) => e.stopPropagation()}
        onMouseDown={(e) => e.stopPropagation()}
+        onDoubleClick={(e) => e.stopPropagation()}
      >
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
--- a/apps/ui/src/components/views/board-view/components/selection-action-bar.tsx
+++ b/apps/ui/src/components/views/board-view/components/selection-action-bar.tsx
@@ -1,11 +1,21 @@
+import { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { Pencil, X, CheckSquare } from 'lucide-react';
+import { Pencil, X, CheckSquare, Trash2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';

 interface SelectionActionBarProps {
  selectedCount: number;
  totalCount: number;
  onEdit: () => void;
+  onDelete: () => void;
  onClear: () => void;
  onSelectAll: () => void;
 }
@@ -14,65 +24,126 @@ export function SelectionActionBar({
  selectedCount,
  totalCount,
  onEdit,
+  onDelete,
  onClear,
  onSelectAll,
 }: SelectionActionBarProps) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
  if (selectedCount === 0) return null;

  const allSelected = selectedCount === totalCount;

+  const handleDeleteClick = () => {
+    setShowDeleteDialog(true);
+  };
+
+  const handleConfirmDelete = () => {
+    setShowDeleteDialog(false);
+    onDelete();
+  };
+
  return (
-    <div
-      className={cn(
-        'fixed bottom-6 left-1/2 -translate-x-1/2 z-50',
-        'flex items-center gap-3 px-4 py-3 rounded-xl',
-        'bg-background/95 backdrop-blur-sm border border-border shadow-lg',
-        'animate-in slide-in-from-bottom-4 fade-in duration-200'
-      )}
-      data-testid="selection-action-bar"
-    >
-      <span className="text-sm font-medium text-foreground">
-        {selectedCount} feature{selectedCount !== 1 ? 's' : ''} selected
-      </span>
+    <>
+      <div
+        className={cn(
+          'fixed bottom-6 left-1/2 -translate-x-1/2 z-50',
+          'flex items-center gap-3 px-4 py-3 rounded-xl',
+          'bg-background/95 backdrop-blur-sm border border-border shadow-lg',
+          'animate-in slide-in-from-bottom-4 fade-in duration-200'
+        )}
+        data-testid="selection-action-bar"
+      >
+        <span className="text-sm font-medium text-foreground">
+          {selectedCount} feature{selectedCount !== 1 ? 's' : ''} selected
+        </span>

-      <div className="h-4 w-px bg-border" />
+        <div className="h-4 w-px bg-border" />

-      <div className="flex items-center gap-2">
-        <Button
-          variant="default"
-          size="sm"
-          onClick={onEdit}
-          className="h-8 bg-brand-500 hover:bg-brand-600"
-          data-testid="selection-edit-button"
-        >
-          <Pencil className="w-4 h-4 mr-1.5" />
-          Edit Selected
-        </Button>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="default"
+            size="sm"
+            onClick={onEdit}
+            className="h-8 bg-brand-500 hover:bg-brand-600"
+            data-testid="selection-edit-button"
+          >
+            <Pencil className="w-4 h-4 mr-1.5" />
+            Edit Selected
+          </Button>

-        {!allSelected && (
          <Button
            variant="outline"
            size="sm"
-            onClick={onSelectAll}
-            className="h-8"
-            data-testid="selection-select-all-button"
+            onClick={handleDeleteClick}
+            className="h-8 text-destructive hover:text-destructive hover:bg-destructive/10"
+            data-testid="selection-delete-button"
          >
-            <CheckSquare className="w-4 h-4 mr-1.5" />
-            Select All ({totalCount})
+            <Trash2 className="w-4 h-4 mr-1.5" />
+            Delete
          </Button>
-        )}

-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={onClear}
-          className="h-8 text-muted-foreground hover:text-foreground"
-          data-testid="selection-clear-button"
-        >
-          <X className="w-4 h-4 mr-1.5" />
-          Clear
-        </Button>
+          {!allSelected && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onSelectAll}
+              className="h-8"
+              data-testid="selection-select-all-button"
+            >
+              <CheckSquare className="w-4 h-4 mr-1.5" />
+              Select All ({totalCount})
+            </Button>
+          )}
+
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClear}
+            className="h-8 text-muted-foreground hover:text-foreground"
+            data-testid="selection-clear-button"
+          >
+            <X className="w-4 h-4 mr-1.5" />
+            Clear
+          </Button>
+        </div>
      </div>
-    </div>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <DialogContent data-testid="bulk-delete-confirmation-dialog">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-destructive">
+              <Trash2 className="w-5 h-5" />
+              Delete Selected Features?
+            </DialogTitle>
+            <DialogDescription>
+              Are you sure you want to permanently delete {selectedCount} feature
+              {selectedCount !== 1 ? 's' : ''}?
+              <span className="block mt-2 text-destructive font-medium">
+                This action cannot be undone.
+              </span>
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setShowDeleteDialog(false)}
+              data-testid="cancel-bulk-delete-button"
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleConfirmDelete}
+              data-testid="confirm-bulk-delete-button"
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
  );
 }
--- a/apps/ui/src/components/views/board-view/dialogs/add-edit-pipeline-step-dialog.tsx
+++ b/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>
+  );
+}
--- a/apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx
+++ b/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 */}
--- a/apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx
+++ b/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 */}
--- a/apps/ui/src/components/views/board-view/dialogs/follow-up-dialog.tsx
+++ b/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.
--- a/apps/ui/src/components/views/board-view/dialogs/index.ts
+++ b/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';
--- a/apps/ui/src/components/views/board-view/dialogs/pipeline-settings-dialog.tsx
+++ b/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}
+      />
+    </>
  );
 }
--- a/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/code-review.ts
+++ b/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.**`,
+};
--- a/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/documentation.ts
+++ b/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.**`,
+};
--- a/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/index.ts
+++ b/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';
+};
--- a/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/optimization.ts
+++ b/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.**`,
+};
--- a/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/security-review.ts
+++ b/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.**`,
+};
--- a/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/testing.ts
+++ b/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.**`,
+};
--- a/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/ux-review.ts
+++ b/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.**`,
+};
--- a/apps/ui/src/components/views/board-view/hooks/use-board-actions.ts
+++ b/apps/ui/src/components/views/board-view/hooks/use-board-actions.ts
@@ -30,7 +30,8 @@ interface UseBoardActionsProps {
    featureId: string,
    updates: Partial<Feature>,
    descriptionHistorySource?: 'enhance' | 'edit',
-    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer',
+    preEnhancementDescription?: string
  ) => Promise<void>;
  persistFeatureDelete: (featureId: string) => Promise<void>;
  saveCategory: (category: string) => Promise<void>;
@@ -251,7 +252,8 @@ export function useBoardActions({
        workMode?: 'current' | 'auto' | 'custom';
      },
      descriptionHistorySource?: 'enhance' | 'edit',
-      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer',
+      preEnhancementDescription?: string
    ) => {
      const workMode = updates.workMode || 'current';

@@ -308,7 +310,13 @@ export function useBoardActions({
      };

      updateFeature(featureId, finalUpdates);
-      persistFeatureUpdate(featureId, finalUpdates, descriptionHistorySource, enhancementMode);
+      persistFeatureUpdate(
+        featureId,
+        finalUpdates,
+        descriptionHistorySource,
+        enhancementMode,
+        preEnhancementDescription
+      );
      if (updates.category) {
        saveCategory(updates.category);
      }
--- a/apps/ui/src/components/views/board-view/hooks/use-board-column-features.ts
+++ b/apps/ui/src/components/views/board-view/hooks/use-board-column-features.ts
@@ -70,9 +70,21 @@ export function useBoardColumnFeatures({
        // We're viewing main but branch hasn't been initialized yet
        // (worktrees disabled or haven't loaded yet).
        // Show features assigned to primary worktree's branch.
-        matchesWorktree = projectPath
-          ? useAppStore.getState().isPrimaryWorktreeBranch(projectPath, featureBranch)
-          : false;
+        if (projectPath) {
+          const worktrees = useAppStore.getState().worktreesByProject[projectPath] ?? [];
+          if (worktrees.length === 0) {
+            // Worktrees not loaded yet - fallback to showing features on common default branches
+            // This prevents features from disappearing during initial load
+            matchesWorktree =
+              featureBranch === 'main' || featureBranch === 'master' || featureBranch === 'develop';
+          } else {
+            matchesWorktree = useAppStore
+              .getState()
+              .isPrimaryWorktreeBranch(projectPath, featureBranch);
+          }
+        } else {
+          matchesWorktree = false;
+        }
      } else {
        // Match by branch name
        matchesWorktree = featureBranch === effectiveBranch;
--- a/apps/ui/src/components/views/board-view/hooks/use-board-features.ts
+++ b/apps/ui/src/components/views/board-view/hooks/use-board-features.ts
@@ -75,6 +75,17 @@ export function useBoardFeatures({ currentProject }: UseBoardFeaturesProps) {
        if (isProjectSwitch) {
          setPersistedCategories([]);
        }
+
+        // Check for interrupted features and resume them
+        // This handles server restarts where features were in pipeline steps
+        if (api.autoMode?.resumeInterrupted) {
+          try {
+            await api.autoMode.resumeInterrupted(currentProject.path);
+            logger.info('Checked for interrupted features');
+          } catch (resumeError) {
+            logger.warn('Failed to check for interrupted features:', resumeError);
+          }
+        }
      } else if (!result.success && result.error) {
        logger.error('API returned error:', result.error);
        // If it's a new project or the error indicates no features found,
--- a/apps/ui/src/components/views/board-view/hooks/use-board-persistence.ts
+++ b/apps/ui/src/components/views/board-view/hooks/use-board-persistence.ts
@@ -19,7 +19,8 @@ export function useBoardPersistence({ currentProject }: UseBoardPersistenceProps
      featureId: string,
      updates: Partial<Feature>,
      descriptionHistorySource?: 'enhance' | 'edit',
-      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer',
+      preEnhancementDescription?: string
    ) => {
      if (!currentProject) return;

@@ -35,7 +36,8 @@ export function useBoardPersistence({ currentProject }: UseBoardPersistenceProps
          featureId,
          updates,
          descriptionHistorySource,
-          enhancementMode
+          enhancementMode,
+          preEnhancementDescription
        );
        if (result.success && result.feature) {
          updateFeature(result.feature.id, result.feature);
--- a/apps/ui/src/components/views/board-view/hooks/use-follow-up-state.ts
+++ b/apps/ui/src/components/views/board-view/hooks/use-follow-up-state.ts
@@ -4,13 +4,18 @@ import {
  FeatureImagePath as DescriptionImagePath,
  ImagePreviewMap,
 } from '@/components/ui/description-image-dropzone';
+import type { FollowUpHistoryEntry } from '../dialogs/follow-up-dialog';

+/**
+ * Custom hook for managing follow-up dialog state including prompt history
+ */
 export function useFollowUpState() {
  const [showFollowUpDialog, setShowFollowUpDialog] = useState(false);
  const [followUpFeature, setFollowUpFeature] = useState<Feature | null>(null);
  const [followUpPrompt, setFollowUpPrompt] = useState('');
  const [followUpImagePaths, setFollowUpImagePaths] = useState<DescriptionImagePath[]>([]);
  const [followUpPreviewMap, setFollowUpPreviewMap] = useState<ImagePreviewMap>(() => new Map());
+  const [followUpPromptHistory, setFollowUpPromptHistory] = useState<FollowUpHistoryEntry[]>([]);

  const resetFollowUpState = useCallback(() => {
    setShowFollowUpDialog(false);
@@ -18,6 +23,7 @@ export function useFollowUpState() {
    setFollowUpPrompt('');
    setFollowUpImagePaths([]);
    setFollowUpPreviewMap(new Map());
+    setFollowUpPromptHistory([]);
  }, []);

  const handleFollowUpDialogChange = useCallback(
@@ -31,6 +37,13 @@ export function useFollowUpState() {
    [resetFollowUpState]
  );

+  /**
+   * Adds a new entry to the prompt history
+   */
+  const addToPromptHistory = useCallback((entry: FollowUpHistoryEntry) => {
+    setFollowUpPromptHistory((prev) => [...prev, entry]);
+  }, []);
+
  return {
    // State
    showFollowUpDialog,
@@ -38,14 +51,17 @@ export function useFollowUpState() {
    followUpPrompt,
    followUpImagePaths,
    followUpPreviewMap,
+    followUpPromptHistory,
    // Setters
    setShowFollowUpDialog,
    setFollowUpFeature,
    setFollowUpPrompt,
    setFollowUpImagePaths,
    setFollowUpPreviewMap,
+    setFollowUpPromptHistory,
    // Helpers
    resetFollowUpState,
    handleFollowUpDialogChange,
+    addToPromptHistory,
  };
 }
--- a/apps/ui/src/components/views/board-view/kanban-board.tsx
+++ b/apps/ui/src/components/views/board-view/kanban-board.tsx
@@ -99,7 +99,7 @@ export function KanbanBoard({
  const { columnWidth, containerStyle } = useResponsiveKanban(columns.length);

  return (
-    <div className="flex-1 overflow-x-auto px-5 pb-4 relative" style={backgroundImageStyle}>
+    <div className="flex-1 overflow-x-auto px-5 pt-4 pb-4 relative" style={backgroundImageStyle}>
      <DndContext
        sensors={sensors}
        collisionDetection={collisionDetectionStrategy}
--- a/apps/ui/src/components/views/board-view/shared/enhancement/enhance-with-ai.tsx
+++ b/apps/ui/src/components/views/board-view/shared/enhancement/enhance-with-ai.tsx
@@ -0,0 +1,152 @@
+import { useState } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Sparkles, ChevronDown, ChevronRight } from 'lucide-react';
+import { toast } from 'sonner';
+import { getElectronAPI } from '@/lib/electron';
+import { ModelOverrideTrigger, useModelOverride } from '@/components/shared';
+import { EnhancementMode, ENHANCEMENT_MODE_LABELS } from './enhancement-constants';
+
+const logger = createLogger('EnhanceWithAI');
+
+interface EnhanceWithAIProps {
+  /** Current text value to enhance */
+  value: string;
+  /** Callback when text is enhanced */
+  onChange: (enhancedText: string) => void;
+  /** Optional callback to track enhancement in history */
+  onHistoryAdd?: (entry: {
+    mode: EnhancementMode;
+    originalText: string;
+    enhancedText: string;
+  }) => void;
+  /** Disable the enhancement feature */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * Reusable "Enhance with AI" component
+ *
+ * Provides AI-powered text enhancement with multiple modes:
+ * - Improve Clarity
+ * - Add Technical Details
+ * - Simplify
+ * - Add Acceptance Criteria
+ * - User Experience
+ *
+ * Used in Add Feature, Edit Feature, and Follow-Up dialogs.
+ */
+export function EnhanceWithAI({
+  value,
+  onChange,
+  onHistoryAdd,
+  disabled = false,
+  className,
+}: EnhanceWithAIProps) {
+  const [isEnhancing, setIsEnhancing] = useState(false);
+  const [enhancementMode, setEnhancementMode] = useState<EnhancementMode>('improve');
+  const [enhanceOpen, setEnhanceOpen] = useState(false);
+
+  // Enhancement model override
+  const enhancementOverride = useModelOverride({ phase: 'enhancementModel' });
+
+  const handleEnhance = async () => {
+    if (!value.trim() || isEnhancing || disabled) return;
+
+    setIsEnhancing(true);
+    try {
+      const api = getElectronAPI();
+      const result = await api.enhancePrompt?.enhance(
+        value,
+        enhancementMode,
+        enhancementOverride.effectiveModel,
+        enhancementOverride.effectiveModelEntry.thinkingLevel
+      );
+
+      if (result?.success && result.enhancedText) {
+        const originalText = value;
+        const enhancedText = result.enhancedText;
+        onChange(enhancedText);
+
+        // Track in history if callback provided (includes original for restoration)
+        onHistoryAdd?.({ mode: enhancementMode, originalText, enhancedText });
+
+        toast.success('Enhanced successfully!');
+      } else {
+        toast.error(result?.error || 'Failed to enhance');
+      }
+    } catch (error) {
+      logger.error('Enhancement failed:', error);
+      toast.error('Failed to enhance');
+    } finally {
+      setIsEnhancing(false);
+    }
+  };
+
+  return (
+    <Collapsible open={enhanceOpen} onOpenChange={setEnhanceOpen} className={className}>
+      <CollapsibleTrigger asChild>
+        <button
+          className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors w-full py-1"
+          disabled={disabled}
+        >
+          {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" disabled={disabled}>
+                {ENHANCEMENT_MODE_LABELS[enhancementMode]}
+                <ChevronDown className="w-3 h-3 ml-1" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              {(Object.entries(ENHANCEMENT_MODE_LABELS) as [EnhancementMode, string][]).map(
+                ([mode, label]) => (
+                  <DropdownMenuItem key={mode} onClick={() => setEnhancementMode(mode)}>
+                    {label}
+                  </DropdownMenuItem>
+                )
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <Button
+            type="button"
+            variant="default"
+            size="sm"
+            className="h-8 text-xs"
+            onClick={handleEnhance}
+            disabled={!value.trim() || isEnhancing || disabled}
+            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>
+  );
+}
--- a/apps/ui/src/components/views/board-view/shared/enhancement/enhancement-constants.ts
+++ b/apps/ui/src/components/views/board-view/shared/enhancement/enhancement-constants.ts
@@ -0,0 +1,20 @@
+/** Enhancement mode options for AI-powered prompt improvement */
+export type EnhancementMode = 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer';
+
+/** Labels for enhancement modes displayed in the UI */
+export const ENHANCEMENT_MODE_LABELS: Record<EnhancementMode, string> = {
+  improve: 'Improve Clarity',
+  technical: 'Add Technical Details',
+  simplify: 'Simplify',
+  acceptance: 'Add Acceptance Criteria',
+  'ux-reviewer': 'User Experience',
+};
+
+/** Descriptions for enhancement modes (for tooltips/accessibility) */
+export const ENHANCEMENT_MODE_DESCRIPTIONS: Record<EnhancementMode, string> = {
+  improve: 'Make the prompt clearer and more concise',
+  technical: 'Add implementation details and specifications',
+  simplify: 'Reduce complexity while keeping the core intent',
+  acceptance: 'Add specific acceptance criteria and test cases',
+  'ux-reviewer': 'Add user experience considerations and flows',
+};
--- a/apps/ui/src/components/views/board-view/shared/enhancement/enhancement-history-button.tsx
+++ b/apps/ui/src/components/views/board-view/shared/enhancement/enhancement-history-button.tsx
@@ -0,0 +1,136 @@
+import { useState, useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { History } from 'lucide-react';
+import { toast } from 'sonner';
+import { EnhancementMode, ENHANCEMENT_MODE_LABELS } from './enhancement-constants';
+
+/**
+ * Base interface for history entries
+ */
+export interface BaseHistoryEntry {
+  timestamp: string;
+  source: 'initial' | 'enhance' | 'edit';
+  enhancementMode?: EnhancementMode;
+}
+
+interface EnhancementHistoryButtonProps<T extends BaseHistoryEntry> {
+  /** Array of history entries */
+  history: T[];
+  /** Current value to compare against for highlighting */
+  currentValue: string;
+  /** Callback when a history entry is restored */
+  onRestore: (value: string) => void;
+  /** Function to extract the text value from a history entry */
+  valueAccessor: (entry: T) => string;
+  /** Title for the history popover (e.g., "Version History", "Prompt History") */
+  title?: string;
+  /** Message shown when restoring an entry */
+  restoreMessage?: string;
+}
+
+/**
+ * Reusable history button component for enhancement-related history
+ *
+ * Displays a popover with a list of historical versions that can be restored.
+ * Used in edit-feature-dialog and follow-up-dialog for description/prompt history.
+ */
+export function EnhancementHistoryButton<T extends BaseHistoryEntry>({
+  history,
+  currentValue,
+  onRestore,
+  valueAccessor,
+  title = 'Version History',
+  restoreMessage = 'Restored from history',
+}: EnhancementHistoryButtonProps<T>) {
+  const [showHistory, setShowHistory] = useState(false);
+
+  // Memoize reversed history to avoid creating new array on every render
+  // NOTE: This hook MUST be called before any early returns to follow Rules of Hooks
+  const reversedHistory = useMemo(() => [...history].reverse(), [history]);
+
+  // Early return AFTER all hooks are called
+  if (history.length === 0) {
+    return null;
+  }
+
+  const getSourceLabel = (entry: T): string => {
+    if (entry.source === 'initial') {
+      return 'Original';
+    }
+    if (entry.source === 'enhance') {
+      const mode = entry.enhancementMode ?? 'improve';
+      const label = ENHANCEMENT_MODE_LABELS[mode as EnhancementMode] ?? mode;
+      return `Enhanced (${label})`;
+    }
+    return 'Edited';
+  };
+
+  const formatDate = (timestamp: string): string => {
+    const date = new Date(timestamp);
+    return date.toLocaleDateString(undefined, {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <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 ({history.length})
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 p-0" align="end">
+        <div className="p-3 border-b">
+          <h4 className="font-medium text-sm">{title}</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">
+          {reversedHistory.map((entry, index) => {
+            const value = valueAccessor(entry);
+            const isCurrentVersion = value === currentValue;
+            const sourceLabel = getSourceLabel(entry);
+            const formattedDate = formatDate(entry.timestamp);
+
+            return (
+              <button
+                key={`${entry.timestamp}-${index}`}
+                onClick={() => {
+                  onRestore(value);
+                  setShowHistory(false);
+                  toast.success(restoreMessage);
+                }}
+                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">
+                  {value.slice(0, 100)}
+                  {value.length > 100 ? '...' : ''}
+                </p>
+                {isCurrentVersion && (
+                  <span className="text-xs text-primary font-medium mt-1 block">
+                    Current version
+                  </span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
--- a/apps/ui/src/components/views/board-view/shared/enhancement/index.ts
+++ b/apps/ui/src/components/views/board-view/shared/enhancement/index.ts
@@ -0,0 +1,3 @@
+export * from './enhancement-constants';
+export * from './enhance-with-ai';
+export * from './enhancement-history-button';
--- a/apps/ui/src/components/views/board-view/shared/index.ts
+++ b/apps/ui/src/components/views/board-view/shared/index.ts
@@ -10,3 +10,4 @@ export * from './planning-mode-selector';
 export * from './planning-mode-select';
 export * from './ancestor-context-section';
 export * from './work-mode-selector';
+export * from './enhancement';
--- a/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-actions-dropdown.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-actions-dropdown.tsx
@@ -6,13 +6,15 @@ import {
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  DropdownMenuLabel,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
 } from '@/components/ui/dropdown-menu';
 import {
  Trash2,
  MoreHorizontal,
  GitCommit,
  GitPullRequest,
-  ExternalLink,
  Download,
  Upload,
  Play,
@@ -22,15 +24,18 @@ import {
  GitMerge,
  AlertCircle,
  RefreshCw,
+  Copy,
 } from 'lucide-react';
+import { toast } from 'sonner';
 import { cn } from '@/lib/utils';
 import type { WorktreeInfo, DevServerInfo, PRInfo, GitRepoStatus } from '../types';
 import { TooltipWrapper } from './tooltip-wrapper';
+import { useAvailableEditors, useEffectiveDefaultEditor } from '../hooks/use-available-editors';
+import { getEditorIcon } from '@/components/icons/editor-icons';

 interface WorktreeActionsDropdownProps {
  worktree: WorktreeInfo;
  isSelected: boolean;
-  defaultEditorName: string;
  aheadCount: number;
  behindCount: number;
  isPulling: boolean;
@@ -42,7 +47,7 @@ interface WorktreeActionsDropdownProps {
  onOpenChange: (open: boolean) => void;
  onPull: (worktree: WorktreeInfo) => void;
  onPush: (worktree: WorktreeInfo) => void;
-  onOpenInEditor: (worktree: WorktreeInfo) => void;
+  onOpenInEditor: (worktree: WorktreeInfo, editorCommand?: string) => void;
  onCommit: (worktree: WorktreeInfo) => void;
  onCreatePR: (worktree: WorktreeInfo) => void;
  onAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
@@ -58,7 +63,6 @@ interface WorktreeActionsDropdownProps {
 export function WorktreeActionsDropdown({
  worktree,
  isSelected,
-  defaultEditorName,
  aheadCount,
  behindCount,
  isPulling,
@@ -82,6 +86,20 @@ export function WorktreeActionsDropdown({
  onRunInitScript,
  hasInitScript,
 }: WorktreeActionsDropdownProps) {
+  // Get available editors for the "Open In" submenu
+  const { editors } = useAvailableEditors();
+
+  // Use shared hook for effective default editor
+  const effectiveDefaultEditor = useEffectiveDefaultEditor(editors);
+
+  // Get other editors (excluding the default) for the submenu
+  const otherEditors = editors.filter((e) => e.command !== effectiveDefaultEditor?.command);
+
+  // Get icon component for the effective editor (avoid IIFE in JSX)
+  const DefaultEditorIcon = effectiveDefaultEditor
+    ? getEditorIcon(effectiveDefaultEditor.command)
+    : null;
+
  // Check if there's a PR associated with this worktree from stored metadata
  const hasPR = !!worktree.pr;

@@ -205,10 +223,54 @@ export function WorktreeActionsDropdown({
          </TooltipWrapper>
        )}
        <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={() => onOpenInEditor(worktree)} className="text-xs">
-          <ExternalLink className="w-3.5 h-3.5 mr-2" />
-          Open in {defaultEditorName}
-        </DropdownMenuItem>
+        {/* Open in editor - split button: click main area for default, chevron for other options */}
+        {effectiveDefaultEditor && (
+          <DropdownMenuSub>
+            <div className="flex items-center">
+              {/* Main clickable area - opens in default editor */}
+              <DropdownMenuItem
+                onClick={() => onOpenInEditor(worktree, effectiveDefaultEditor.command)}
+                className="text-xs flex-1 pr-0 rounded-r-none"
+              >
+                {DefaultEditorIcon && <DefaultEditorIcon className="w-3.5 h-3.5 mr-2" />}
+                Open in {effectiveDefaultEditor.name}
+              </DropdownMenuItem>
+              {/* Chevron trigger for submenu with other editors and Copy Path */}
+              <DropdownMenuSubTrigger className="text-xs px-1 rounded-l-none border-l border-border/30 h-8" />
+            </div>
+            <DropdownMenuSubContent>
+              {/* Other editors */}
+              {otherEditors.map((editor) => {
+                const EditorIcon = getEditorIcon(editor.command);
+                return (
+                  <DropdownMenuItem
+                    key={editor.command}
+                    onClick={() => onOpenInEditor(worktree, editor.command)}
+                    className="text-xs"
+                  >
+                    <EditorIcon className="w-3.5 h-3.5 mr-2" />
+                    {editor.name}
+                  </DropdownMenuItem>
+                );
+              })}
+              {otherEditors.length > 0 && <DropdownMenuSeparator />}
+              <DropdownMenuItem
+                onClick={async () => {
+                  try {
+                    await navigator.clipboard.writeText(worktree.path);
+                    toast.success('Path copied to clipboard');
+                  } catch {
+                    toast.error('Failed to copy path to clipboard');
+                  }
+                }}
+                className="text-xs"
+              >
+                <Copy className="w-3.5 h-3.5 mr-2" />
+                Copy Path
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        )}
        {!worktree.isMain && hasInitScript && (
          <DropdownMenuItem onClick={() => onRunInitScript(worktree)} className="text-xs">
            <RefreshCw className="w-3.5 h-3.5 mr-2" />
--- a/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx
@@ -17,7 +17,6 @@ interface WorktreeTabProps {
  isActivating: boolean;
  isDevServerRunning: boolean;
  devServerInfo?: DevServerInfo;
-  defaultEditorName: string;
  branches: BranchInfo[];
  filteredBranches: BranchInfo[];
  branchFilter: string;
@@ -37,7 +36,7 @@ interface WorktreeTabProps {
  onCreateBranch: (worktree: WorktreeInfo) => void;
  onPull: (worktree: WorktreeInfo) => void;
  onPush: (worktree: WorktreeInfo) => void;
-  onOpenInEditor: (worktree: WorktreeInfo) => void;
+  onOpenInEditor: (worktree: WorktreeInfo, editorCommand?: string) => void;
  onCommit: (worktree: WorktreeInfo) => void;
  onCreatePR: (worktree: WorktreeInfo) => void;
  onAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
@@ -60,7 +59,6 @@ export function WorktreeTab({
  isActivating,
  isDevServerRunning,
  devServerInfo,
-  defaultEditorName,
  branches,
  filteredBranches,
  branchFilter,
@@ -319,7 +317,6 @@ export function WorktreeTab({
      <WorktreeActionsDropdown
        worktree={worktree}
        isSelected={isSelected}
-        defaultEditorName={defaultEditorName}
        aheadCount={aheadCount}
        behindCount={behindCount}
        isPulling={isPulling}
--- a/apps/ui/src/components/views/board-view/worktree-panel/hooks/index.ts
+++ b/apps/ui/src/components/views/board-view/worktree-panel/hooks/index.ts
@@ -2,5 +2,5 @@ export { useWorktrees } from './use-worktrees';
 export { useDevServers } from './use-dev-servers';
 export { useBranches } from './use-branches';
 export { useWorktreeActions } from './use-worktree-actions';
-export { useDefaultEditor } from './use-default-editor';
 export { useRunningFeatures } from './use-running-features';
+export { useAvailableEditors, useEffectiveDefaultEditor } from './use-available-editors';
--- a/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-available-editors.ts
+++ b/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-available-editors.ts
@@ -0,0 +1,101 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from '@/lib/electron';
+import { useAppStore } from '@/store/app-store';
+import type { EditorInfo } from '@automaker/types';
+
+const logger = createLogger('AvailableEditors');
+
+// Re-export EditorInfo for convenience
+export type { EditorInfo };
+
+export function useAvailableEditors() {
+  const [editors, setEditors] = useState<EditorInfo[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const fetchAvailableEditors = useCallback(async () => {
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.getAvailableEditors) {
+        setIsLoading(false);
+        return;
+      }
+      const result = await api.worktree.getAvailableEditors();
+      if (result.success && result.result?.editors) {
+        setEditors(result.result.editors);
+      }
+    } catch (error) {
+      logger.error('Failed to fetch available editors:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  /**
+   * Refresh editors by clearing the server cache and re-detecting
+   * Use this when the user has installed/uninstalled editors
+   */
+  const refresh = useCallback(async () => {
+    setIsRefreshing(true);
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.refreshEditors) {
+        // Fallback to regular fetch if refresh not available
+        await fetchAvailableEditors();
+        return;
+      }
+      const result = await api.worktree.refreshEditors();
+      if (result.success && result.result?.editors) {
+        setEditors(result.result.editors);
+        logger.info(`Editor cache refreshed, found ${result.result.editors.length} editors`);
+      }
+    } catch (error) {
+      logger.error('Failed to refresh editors:', error);
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [fetchAvailableEditors]);
+
+  useEffect(() => {
+    fetchAvailableEditors();
+  }, [fetchAvailableEditors]);
+
+  return {
+    editors,
+    isLoading,
+    isRefreshing,
+    refresh,
+    // Convenience property: has multiple editors (for deciding whether to show submenu)
+    hasMultipleEditors: editors.length > 1,
+    // The first editor is the "default" one
+    defaultEditor: editors[0] ?? null,
+  };
+}
+
+/**
+ * Hook to get the effective default editor based on user settings
+ * Falls back to: Cursor > VS Code > first available editor
+ */
+export function useEffectiveDefaultEditor(editors: EditorInfo[]): EditorInfo | null {
+  const defaultEditorCommand = useAppStore((s) => s.defaultEditorCommand);
+
+  return useMemo(() => {
+    if (editors.length === 0) return null;
+
+    // If user has a saved preference and it exists in available editors, use it
+    if (defaultEditorCommand) {
+      const found = editors.find((e) => e.command === defaultEditorCommand);
+      if (found) return found;
+    }
+
+    // Auto-detect: prefer Cursor, then VS Code, then first available
+    const cursor = editors.find((e) => e.command === 'cursor');
+    if (cursor) return cursor;
+
+    const vscode = editors.find((e) => e.command === 'code');
+    if (vscode) return vscode;
+
+    return editors[0];
+  }, [editors, defaultEditorCommand]);
+}
--- a/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktree-actions.ts
+++ b/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktree-actions.ts
@@ -125,14 +125,14 @@ export function useWorktreeActions({ fetchWorktrees, fetchBranches }: UseWorktre
    [isPushing, fetchBranches, fetchWorktrees]
  );

-  const handleOpenInEditor = useCallback(async (worktree: WorktreeInfo) => {
+  const handleOpenInEditor = useCallback(async (worktree: WorktreeInfo, editorCommand?: string) => {
    try {
      const api = getElectronAPI();
      if (!api?.worktree?.openInEditor) {
        logger.warn('Open in editor API not available');
        return;
      }
-      const result = await api.worktree.openInEditor(worktree.path);
+      const result = await api.worktree.openInEditor(worktree.path, editorCommand);
      if (result.success && result.result) {
        toast.success(result.result.message);
      } else if (result.error) {
--- a/apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx
@@ -10,7 +10,6 @@ import {
  useDevServers,
  useBranches,
  useWorktreeActions,
-  useDefaultEditor,
  useRunningFeatures,
 } from './hooks';
 import { WorktreeTab } from './components';
@@ -77,8 +76,6 @@ export function WorktreePanel({
    fetchBranches,
  });

-  const { defaultEditorName } = useDefaultEditor();
-
  const { hasRunningFeatures } = useRunningFeatures({
    runningFeatureIds,
    features,
@@ -188,7 +185,6 @@ export function WorktreePanel({
            isActivating={isActivating}
            isDevServerRunning={isDevServerRunning(mainWorktree)}
            devServerInfo={getDevServerInfo(mainWorktree)}
-            defaultEditorName={defaultEditorName}
            branches={branches}
            filteredBranches={filteredBranches}
            branchFilter={branchFilter}
@@ -245,7 +241,6 @@ export function WorktreePanel({
                  isActivating={isActivating}
                  isDevServerRunning={isDevServerRunning(worktree)}
                  devServerInfo={getDevServerInfo(worktree)}
-                  defaultEditorName={defaultEditorName}
                  branches={branches}
                  filteredBranches={filteredBranches}
                  branchFilter={branchFilter}