feat: add resume interrupted features endpoint and handler

- Introduced a new endpoint `/resume-interrupted` to handle resuming features that were interrupted during server restarts.
- Implemented the `createResumeInterruptedHandler` to check for and resume interrupted features based on the project path.
- Enhanced the `AutoModeService` to track and manage the execution state of features, ensuring they can be resumed correctly.
- Updated relevant types and prompts to include the new 'ux-reviewer' enhancement mode for better user experience handling.
- Added new templates for UX review and other enhancement modes to improve task descriptions from a user experience perspective.

apps/server/src/routes/auto-mode/index.ts

@@ -17,6 +17,7 @@ import { createAnalyzeProjectHandler } from './routes/analyze-project.js';
 import { createFollowUpFeatureHandler } from './routes/follow-up-feature.js';
 import { createCommitFeatureHandler } from './routes/commit-feature.js';
 import { createApprovePlanHandler } from './routes/approve-plan.js';
+import { createResumeInterruptedHandler } from './routes/resume-interrupted.js';
 
 export function createAutoModeRoutes(autoModeService: AutoModeService): Router {
   const router = Router();
@@ -63,6 +64,11 @@ export function createAutoModeRoutes(autoModeService: AutoModeService): Router {
     validatePathParams('projectPath'),
     createApprovePlanHandler(autoModeService)
   );
+  router.post(
+    '/resume-interrupted',
+    validatePathParams('projectPath'),
+    createResumeInterruptedHandler(autoModeService)
+  );
 
   return router;
 }

apps/server/src/routes/auto-mode/routes/resume-interrupted.ts

@@ -0,0 +1,42 @@
+/**
+ * Resume Interrupted Features Handler
+ *
+ * Checks for features that were interrupted (in pipeline steps or in_progress)
+ * when the server was restarted and resumes them.
+ */
+
+import type { Request, Response } from 'express';
+import { createLogger } from '@automaker/utils';
+import type { AutoModeService } from '../../../services/auto-mode-service.js';
+
+const logger = createLogger('ResumeInterrupted');
+
+interface ResumeInterruptedRequest {
+  projectPath: string;
+}
+
+export function createResumeInterruptedHandler(autoModeService: AutoModeService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    const { projectPath } = req.body as ResumeInterruptedRequest;
+
+    if (!projectPath) {
+      res.status(400).json({ error: 'Project path is required' });
+      return;
+    }
+
+    logger.info(`Checking for interrupted features in ${projectPath}`);
+
+    try {
+      await autoModeService.resumeInterruptedFeatures(projectPath);
+      res.json({
+        success: true,
+        message: 'Resume check completed',
+      });
+    } catch (error) {
+      logger.error('Error resuming interrupted features:', error);
+      res.status(500).json({
+        error: error instanceof Error ? error.message : 'Unknown error',
+      });
+    }
+  };
+}

apps/server/src/routes/enhance-prompt/routes/enhance.ts

@@ -188,6 +188,7 @@ export function createEnhanceHandler(
         technical: prompts.enhancement.technicalSystemPrompt,
         simplify: prompts.enhancement.simplifySystemPrompt,
         acceptance: prompts.enhancement.acceptanceSystemPrompt,
+        'ux-reviewer': prompts.enhancement.uxReviewerSystemPrompt,
       };
       const systemPrompt = systemPromptMap[validMode];
 

apps/server/src/routes/features/routes/update.ts

@@ -16,7 +16,7 @@ export function createUpdateHandler(featureLoader: FeatureLoader) {
           featureId: string;
           updates: Partial<Feature>;
           descriptionHistorySource?: 'enhance' | 'edit';
-          enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance';
+          enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer';
         };
 
       if (!projectPath || !featureId || !updates) {

apps/server/src/services/auto-mode-service.ts

@@ -31,7 +31,13 @@ import {
 const logger = createLogger('AutoMode');
 import { resolveModelString, resolvePhaseModel, DEFAULT_MODELS } from '@automaker/model-resolver';
 import { resolveDependencies, areDependenciesSatisfied } from '@automaker/dependency-resolver';
-import { getFeatureDir, getAutomakerDir, getFeaturesDir } from '@automaker/platform';
+import {
+  getFeatureDir,
+  getAutomakerDir,
+  getFeaturesDir,
+  getExecutionStatePath,
+  ensureAutomakerDir,
+} from '@automaker/platform';
 import { exec } from 'child_process';
 import { promisify } from 'util';
 import path from 'path';
@@ -201,6 +207,29 @@ interface AutoModeConfig {
   projectPath: string;
 }
 
+/**
+ * Execution state for recovery after server restart
+ * Tracks which features were running and auto-loop configuration
+ */
+interface ExecutionState {
+  version: 1;
+  autoLoopWasRunning: boolean;
+  maxConcurrency: number;
+  projectPath: string;
+  runningFeatureIds: string[];
+  savedAt: string;
+}
+
+// Default empty execution state
+const DEFAULT_EXECUTION_STATE: ExecutionState = {
+  version: 1,
+  autoLoopWasRunning: false,
+  maxConcurrency: 3,
+  projectPath: '',
+  runningFeatureIds: [],
+  savedAt: '',
+};
+
 // Constants for consecutive failure tracking
 const CONSECUTIVE_FAILURE_THRESHOLD = 3; // Pause after 3 consecutive failures
 const FAILURE_WINDOW_MS = 60000; // Failures within 1 minute count as consecutive
@@ -322,6 +351,9 @@ export class AutoModeService {
       projectPath,
     });
 
+    // Save execution state for recovery after restart
+    await this.saveExecutionState(projectPath);
+
     // Note: Memory folder initialization is now handled by loadContextFiles
 
     // Run the loop in the background
@@ -390,17 +422,23 @@ export class AutoModeService {
    */
   async stopAutoLoop(): Promise<number> {
     const wasRunning = this.autoLoopRunning;
+    const projectPath = this.config?.projectPath;
     this.autoLoopRunning = false;
     if (this.autoLoopAbortController) {
       this.autoLoopAbortController.abort();
       this.autoLoopAbortController = null;
     }
 
+    // Clear execution state when auto-loop is explicitly stopped
+    if (projectPath) {
+      await this.clearExecutionState(projectPath);
+    }
+
     // Emit stop event immediately when user explicitly stops
     if (wasRunning) {
       this.emitAutoModeEvent('auto_mode_stopped', {
         message: 'Auto mode stopped',
-        projectPath: this.config?.projectPath,
+        projectPath,
       });
     }
 
@@ -441,6 +479,11 @@ export class AutoModeService {
     };
     this.runningFeatures.set(featureId, tempRunningFeature);
 
+    // Save execution state when feature starts
+    if (isAutoMode) {
+      await this.saveExecutionState(projectPath);
+    }
+
     try {
       // Validate that project path is allowed using centralized validation
       validateWorkingDirectory(projectPath);
@@ -695,6 +738,11 @@ export class AutoModeService {
         `Pending approvals at cleanup: ${Array.from(this.pendingApprovals.keys()).join(', ') || 'none'}`
       );
       this.runningFeatures.delete(featureId);
+
+      // Update execution state after feature completes
+      if (this.autoLoopRunning && projectPath) {
+        await this.saveExecutionState(projectPath);
+      }
     }
   }
 
@@ -2950,6 +2998,149 @@ Begin implementing task ${task.id} now.`;
     });
   }
 
+  // ============================================================================
+  // Execution State Persistence - For recovery after server restart
+  // ============================================================================
+
+  /**
+   * Save execution state to disk for recovery after server restart
+   */
+  private async saveExecutionState(projectPath: string): Promise<void> {
+    try {
+      await ensureAutomakerDir(projectPath);
+      const statePath = getExecutionStatePath(projectPath);
+      const state: ExecutionState = {
+        version: 1,
+        autoLoopWasRunning: this.autoLoopRunning,
+        maxConcurrency: this.config?.maxConcurrency ?? 3,
+        projectPath,
+        runningFeatureIds: Array.from(this.runningFeatures.keys()),
+        savedAt: new Date().toISOString(),
+      };
+      await secureFs.writeFile(statePath, JSON.stringify(state, null, 2), 'utf-8');
+      logger.info(`Saved execution state: ${state.runningFeatureIds.length} running features`);
+    } catch (error) {
+      logger.error('Failed to save execution state:', error);
+    }
+  }
+
+  /**
+   * Load execution state from disk
+   */
+  private async loadExecutionState(projectPath: string): Promise<ExecutionState> {
+    try {
+      const statePath = getExecutionStatePath(projectPath);
+      const content = (await secureFs.readFile(statePath, 'utf-8')) as string;
+      const state = JSON.parse(content) as ExecutionState;
+      return state;
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+        logger.error('Failed to load execution state:', error);
+      }
+      return DEFAULT_EXECUTION_STATE;
+    }
+  }
+
+  /**
+   * Clear execution state (called on successful shutdown or when auto-loop stops)
+   */
+  private async clearExecutionState(projectPath: string): Promise<void> {
+    try {
+      const statePath = getExecutionStatePath(projectPath);
+      await secureFs.unlink(statePath);
+      logger.info('Cleared execution state');
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+        logger.error('Failed to clear execution state:', error);
+      }
+    }
+  }
+
+  /**
+   * Check for and resume interrupted features after server restart
+   * This should be called during server initialization
+   */
+  async resumeInterruptedFeatures(projectPath: string): Promise<void> {
+    logger.info('Checking for interrupted features to resume...');
+
+    // Load all features and find those that were interrupted
+    const featuresDir = getFeaturesDir(projectPath);
+
+    try {
+      const entries = await secureFs.readdir(featuresDir, { withFileTypes: true });
+      const interruptedFeatures: Feature[] = [];
+
+      for (const entry of entries) {
+        if (entry.isDirectory()) {
+          const featurePath = path.join(featuresDir, entry.name, 'feature.json');
+          try {
+            const data = (await secureFs.readFile(featurePath, 'utf-8')) as string;
+            const feature = JSON.parse(data) as Feature;
+
+            // Check if feature was interrupted (in_progress or pipeline_*)
+            if (
+              feature.status === 'in_progress' ||
+              (feature.status && feature.status.startsWith('pipeline_'))
+            ) {
+              // Verify it has existing context (agent-output.md)
+              const featureDir = getFeatureDir(projectPath, feature.id);
+              const contextPath = path.join(featureDir, 'agent-output.md');
+              try {
+                await secureFs.access(contextPath);
+                interruptedFeatures.push(feature);
+                logger.info(
+                  `Found interrupted feature: ${feature.id} (${feature.title}) - status: ${feature.status}`
+                );
+              } catch {
+                // No context file, skip this feature - it will be restarted fresh
+                logger.info(`Interrupted feature ${feature.id} has no context, will restart fresh`);
+              }
+            }
+          } catch {
+            // Skip invalid features
+          }
+        }
+      }
+
+      if (interruptedFeatures.length === 0) {
+        logger.info('No interrupted features found');
+        return;
+      }
+
+      logger.info(`Found ${interruptedFeatures.length} interrupted feature(s) to resume`);
+
+      // Emit event to notify UI
+      this.emitAutoModeEvent('auto_mode_resuming_features', {
+        message: `Resuming ${interruptedFeatures.length} interrupted feature(s) after server restart`,
+        projectPath,
+        featureIds: interruptedFeatures.map((f) => f.id),
+        features: interruptedFeatures.map((f) => ({
+          id: f.id,
+          title: f.title,
+          status: f.status,
+        })),
+      });
+
+      // Resume each interrupted feature
+      for (const feature of interruptedFeatures) {
+        try {
+          logger.info(`Resuming feature: ${feature.id} (${feature.title})`);
+          // Use resumeFeature which will detect the existing context and continue
+          await this.resumeFeature(projectPath, feature.id, true);
+        } catch (error) {
+          logger.error(`Failed to resume feature ${feature.id}:`, error);
+          // Continue with other features
+        }
+      }
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+        logger.info('No features directory found, nothing to resume');
+      } else {
+        logger.error('Error checking for interrupted features:', error);
+      }
+    }
+  }
+
   /**
    * Extract and record learnings from a completed feature
    * Uses a quick Claude call to identify important decisions and patterns

apps/server/src/services/feature-loader.ts

@@ -314,7 +314,7 @@ export class FeatureLoader {
     featureId: string,
     updates: Partial<Feature>,
     descriptionHistorySource?: 'enhance' | 'edit',
-    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
   ): Promise<Feature> {
     const feature = await this.get(projectPath, featureId);
     if (!feature) {

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>

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

@@ -141,7 +141,7 @@ export function AddFeatureDialog({
   const [descriptionError, setDescriptionError] = useState(false);
   const [isEnhancing, setIsEnhancing] = useState(false);
   const [enhancementMode, setEnhancementMode] = useState<
-    'improve' | 'technical' | 'simplify' | 'acceptance'
+    'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
   >('improve');
   const [enhanceOpen, setEnhanceOpen] = useState(false);
 
@@ -431,6 +431,7 @@ export function AddFeatureDialog({
                         {enhancementMode === 'technical' && 'Add Technical Details'}
                         {enhancementMode === 'simplify' && 'Simplify'}
                         {enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
+                        {enhancementMode === 'ux-reviewer' && 'User Experience'}
                         <ChevronDown className="w-3 h-3 ml-1" />
                       </Button>
                     </DropdownMenuTrigger>
@@ -447,6 +448,9 @@ export function AddFeatureDialog({
                       <DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
                         Add Acceptance Criteria
                       </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => setEnhancementMode('ux-reviewer')}>
+                        User Experience
+                      </DropdownMenuItem>
                     </DropdownMenuContent>
                   </DropdownMenu>
 

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

@@ -79,7 +79,7 @@ interface EditFeatureDialogProps {
       requirePlanApproval: boolean;
     },
     descriptionHistorySource?: 'enhance' | 'edit',
-    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
   ) => void;
   categorySuggestions: string[];
   branchSuggestions: string[];
@@ -112,7 +112,7 @@ export function EditFeatureDialog({
   );
   const [isEnhancing, setIsEnhancing] = useState(false);
   const [enhancementMode, setEnhancementMode] = useState<
-    'improve' | 'technical' | 'simplify' | 'acceptance'
+    'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
   >('improve');
   const [enhanceOpen, setEnhanceOpen] = useState(false);
   const [showDependencyTree, setShowDependencyTree] = useState(false);
@@ -338,11 +338,21 @@ export function EditFeatureDialog({
                               hour: '2-digit',
                               minute: '2-digit',
                             });
+                            const getEnhancementModeLabel = (mode?: string) => {
+                              const labels: Record<string, string> = {
+                                improve: 'Improve Clarity',
+                                technical: 'Add Technical Details',
+                                simplify: 'Simplify',
+                                acceptance: 'Add Acceptance Criteria',
+                                'ux-reviewer': 'User Experience',
+                              };
+                              return labels[mode || 'improve'] || mode || 'improve';
+                            };
                             const sourceLabel =
                               entry.source === 'initial'
                                 ? 'Original'
                                 : entry.source === 'enhance'
-                                  ? `Enhanced (${entry.enhancementMode || 'improve'})`
+                                  ? `Enhanced (${getEnhancementModeLabel(entry.enhancementMode)})`
                                   : 'Edited';
 
                             return (
@@ -455,6 +465,7 @@ export function EditFeatureDialog({
                         {enhancementMode === 'technical' && 'Add Technical Details'}
                         {enhancementMode === 'simplify' && 'Simplify'}
                         {enhancementMode === 'acceptance' && 'Add Acceptance Criteria'}
+                        {enhancementMode === 'ux-reviewer' && 'User Experience'}
                         <ChevronDown className="w-3 h-3 ml-1" />
                       </Button>
                     </DropdownMenuTrigger>
@@ -471,6 +482,9 @@ export function EditFeatureDialog({
                       <DropdownMenuItem onClick={() => setEnhancementMode('acceptance')}>
                         Add Acceptance Criteria
                       </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => setEnhancementMode('ux-reviewer')}>
+                        User Experience
+                      </DropdownMenuItem>
                     </DropdownMenuContent>
                   </DropdownMenu>
 

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

@@ -18,10 +18,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Plus, Trash2, ChevronUp, ChevronDown, Upload, Pencil, X, FileText } from 'lucide-react';
+import { Plus, Trash2, ChevronUp, ChevronDown, Upload, Pencil, X } from 'lucide-react';
 import { toast } from 'sonner';
 import type { PipelineConfig, PipelineStep } from '@automaker/types';
 import { cn } from '@/lib/utils';
+import { STEP_TEMPLATES } from './pipeline-step-templates';
 
 // Color options for pipeline columns
 const COLOR_OPTIONS = [
@@ -36,196 +37,6 @@ const COLOR_OPTIONS = [
   { 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;
-};
-
 interface PipelineSettingsDialogProps {
   open: boolean;
   onClose: () => void;
@@ -245,7 +56,7 @@ interface EditingStep {
 export function PipelineSettingsDialog({
   open,
   onClose,
-  projectPath,
+  projectPath: _projectPath,
   pipelineConfig,
   onSave,
 }: PipelineSettingsDialogProps) {
@@ -335,7 +146,7 @@ export function PipelineSettingsDialog({
       const content = await file.text();
       setEditingStep((prev) => (prev ? { ...prev, instructions: content } : null));
       toast.success('Instructions loaded from file');
-    } catch (error) {
+    } catch {
       toast.error('Failed to load file');
     }
 
@@ -470,7 +281,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);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/ui/src/components/views/board-view/hooks/use-board-actions.ts

@@ -30,7 +30,7 @@ interface UseBoardActionsProps {
     featureId: string,
     updates: Partial<Feature>,
     descriptionHistorySource?: 'enhance' | 'edit',
-    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
   ) => Promise<void>;
   persistFeatureDelete: (featureId: string) => Promise<void>;
   saveCategory: (category: string) => Promise<void>;
@@ -251,7 +251,7 @@ export function useBoardActions({
         workMode?: 'current' | 'auto' | 'custom';
       },
       descriptionHistorySource?: 'enhance' | 'edit',
-      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
     ) => {
       const workMode = updates.workMode || 'current';
 

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;

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,

apps/ui/src/components/views/board-view/hooks/use-board-persistence.ts

@@ -19,7 +19,7 @@ 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'
     ) => {
       if (!currentProject) return;
 

apps/ui/src/components/views/settings-view/prompts/prompt-customization-section.tsx

@@ -431,6 +431,16 @@ export function PromptCustomizationSection({
                   updatePrompt('enhancement', 'acceptanceSystemPrompt', value)
                 }
               />
+
+              <PromptField
+                label="User Experience Mode"
+                description="Review and enhance from a user experience and design perspective"
+                defaultValue={DEFAULT_ENHANCEMENT_PROMPTS.uxReviewerSystemPrompt}
+                customValue={promptCustomization?.enhancement?.uxReviewerSystemPrompt}
+                onCustomValueChange={(value) =>
+                  updatePrompt('enhancement', 'uxReviewerSystemPrompt', value)
+                }
+              />
             </div>
           </TabsContent>
         </Tabs>

apps/ui/src/lib/electron.ts

@@ -461,7 +461,7 @@ export interface FeaturesAPI {
     featureId: string,
     updates: Partial<Feature>,
     descriptionHistorySource?: 'enhance' | 'edit',
-    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
   ) => Promise<{ success: boolean; feature?: Feature; error?: string }>;
   delete: (projectPath: string, featureId: string) => Promise<{ success: boolean; error?: string }>;
   getAgentOutput: (
@@ -532,6 +532,9 @@ export interface AutoModeAPI {
     editedPlan?: string,
     feedback?: string
   ) => Promise<{ success: boolean; error?: string }>;
+  resumeInterrupted: (
+    projectPath: string
+  ) => Promise<{ success: boolean; message?: string; error?: string }>;
   onEvent: (callback: (event: AutoModeEvent) => void) => () => void;
 }
 
@@ -2069,6 +2072,11 @@ function createMockAutoModeAPI(): AutoModeAPI {
       return { success: true };
     },
 
+    resumeInterrupted: async (projectPath: string) => {
+      console.log('[Mock] Resume interrupted features for:', projectPath);
+      return { success: true, message: 'Mock: no interrupted features' };
+    },
+
     onEvent: (callback: (event: AutoModeEvent) => void) => {
       mockAutoModeCallbacks.push(callback);
       return () => {

apps/ui/src/lib/http-api-client.ts

@@ -1449,7 +1449,7 @@ export class HttpApiClient implements ElectronAPI {
       featureId: string,
       updates: Partial<Feature>,
       descriptionHistorySource?: 'enhance' | 'edit',
-      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'
+      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'
     ) =>
       this.post('/api/features/update', {
         projectPath,
@@ -1533,6 +1533,8 @@ export class HttpApiClient implements ElectronAPI {
         editedPlan,
         feedback,
       }),
+    resumeInterrupted: (projectPath: string) =>
+      this.post('/api/auto-mode/resume-interrupted', { projectPath }),
     onEvent: (callback: (event: AutoModeEvent) => void) => {
       return this.subscribeToEvent('auto-mode:event', callback as EventCallback);
     },

apps/ui/src/types/electron.d.ts

@@ -300,6 +300,17 @@ export type AutoModeEvent =
       featureId: string;
       projectPath?: string;
       phaseNumber: number;
+    }
+  | {
+      type: 'auto_mode_resuming_features';
+      message: string;
+      projectPath?: string;
+      featureIds: string[];
+      features: Array<{
+        id: string;
+        title?: string;
+        status?: string;
+      }>;
     };
 
 export type SpecRegenerationEvent =

libs/platform/src/index.ts

@@ -18,6 +18,7 @@ export {
   getValidationPath,
   getAppSpecPath,
   getBranchTrackingPath,
+  getExecutionStatePath,
   ensureAutomakerDir,
   getGlobalSettingsPath,
   getCredentialsPath,

libs/platform/src/paths.ts

@@ -173,6 +173,19 @@ export function getBranchTrackingPath(projectPath: string): string {
   return path.join(getAutomakerDir(projectPath), 'active-branches.json');
 }
 
+/**
+ * Get the execution state file path for a project
+ *
+ * Stores JSON metadata about auto-mode execution state for recovery on restart.
+ * Tracks which features were running and auto-loop configuration.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/execution-state.json
+ */
+export function getExecutionStatePath(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), 'execution-state.json');
+}
+
 /**
  * Create the automaker directory structure for a project if it doesn't exist
  *

libs/prompts/src/defaults.ts

@@ -415,6 +415,7 @@ import {
   TECHNICAL_SYSTEM_PROMPT,
   SIMPLIFY_SYSTEM_PROMPT,
   ACCEPTANCE_SYSTEM_PROMPT,
+  UX_REVIEWER_SYSTEM_PROMPT,
 } from './enhancement.js';
 
 /**
@@ -425,6 +426,7 @@ export const DEFAULT_ENHANCEMENT_PROMPTS: ResolvedEnhancementPrompts = {
   technicalSystemPrompt: TECHNICAL_SYSTEM_PROMPT,
   simplifySystemPrompt: SIMPLIFY_SYSTEM_PROMPT,
   acceptanceSystemPrompt: ACCEPTANCE_SYSTEM_PROMPT,
+  uxReviewerSystemPrompt: UX_REVIEWER_SYSTEM_PROMPT,
 };
 
 /**

libs/prompts/src/enhancement-modes/acceptance.ts

@@ -0,0 +1,90 @@
+/**
+ * "Acceptance" Enhancement Mode
+ * Adds testable acceptance criteria to task descriptions.
+ */
+
+import type { EnhancementExample } from '@automaker/types';
+
+/**
+ * System prompt for the "acceptance" enhancement mode.
+ * Adds testable acceptance criteria to task descriptions.
+ */
+export const ACCEPTANCE_SYSTEM_PROMPT = `You are a QA specialist skilled at defining testable acceptance criteria for software features.
+
+Your task is to enhance a task description by adding clear acceptance criteria:
+
+1. UNDERSTAND the feature:
+   - Identify all user-facing behaviors
+   - Note system state changes
+   - Consider different user roles or scenarios
+
+2. DEFINE acceptance criteria using Given-When-Then format:
+   - Given: The initial context or preconditions
+   - When: The action or trigger
+   - Then: The expected outcome
+
+3. COVER key scenarios:
+   - Happy path (successful completion)
+   - Edge cases (boundary conditions)
+   - Error scenarios (what should NOT happen)
+   - Performance requirements if relevant
+
+4. MAKE criteria testable:
+   - Use specific, measurable outcomes
+   - Avoid vague terms like "quickly" or "easily"
+   - Include specific values where applicable
+
+Output the original description followed by a clear "Acceptance Criteria:" section with numbered, testable criteria. Do not include explanations about your process.`;
+
+/**
+ * Few-shot examples for the "acceptance" enhancement mode
+ */
+export const ACCEPTANCE_EXAMPLES: EnhancementExample[] = [
+  {
+    input: 'Add password reset functionality',
+    output: `Add Password Reset Functionality
+
+Allow users to reset their password via email when they forget it.
+
+Acceptance Criteria:
+
+1. Given a user is on the login page, when they click "Forgot Password", then they should see a password reset form requesting their email.
+
+2. Given a user enters a valid registered email, when they submit the form, then they should receive a password reset email within 2 minutes.
+
+3. Given a user clicks the reset link in their email, when the link is less than 1 hour old, then they should see a form to enter a new password.
+
+4. Given a user enters a new valid password (min 8 chars, 1 number, 1 special char), when they submit, then their password should be updated and they should be redirected to login.
+
+5. Given a user enters an unregistered email, when they submit the reset form, then they should see the same success message (security: don't reveal which emails exist).
+
+6. Given a reset link older than 1 hour, when a user clicks it, then they should see an expiration message with option to request a new link.`,
+  },
+  {
+    input: 'Shopping cart checkout',
+    output: `Shopping Cart Checkout
+
+Implement the checkout flow for purchasing items in the shopping cart.
+
+Acceptance Criteria:
+
+1. Given a user has items in their cart, when they click "Checkout", then they should see an order summary with item details and total price.
+
+2. Given a user is on the checkout page, when they enter valid shipping information, then the form should validate in real-time and show estimated delivery date.
+
+3. Given valid shipping info is entered, when the user proceeds to payment, then they should see available payment methods (credit card, PayPal).
+
+4. Given valid payment details are entered, when the user confirms the order, then the payment should be processed and order confirmation displayed within 5 seconds.
+
+5. Given a successful order, when confirmation is shown, then the user should receive an email receipt and their cart should be emptied.
+
+6. Given a payment failure, when the error occurs, then the user should see a clear error message and their cart should remain intact.
+
+7. Given the user closes the browser during checkout, when they return, then their cart contents should still be available.`,
+  },
+];
+
+/**
+ * Description of what this enhancement mode does
+ */
+export const ACCEPTANCE_DESCRIPTION = 'Add testable acceptance criteria to task descriptions';

libs/prompts/src/enhancement-modes/improve.ts

@@ -0,0 +1,88 @@
+/**
+ * "Improve" Enhancement Mode
+ * Transforms vague or unclear requests into clear, actionable task descriptions.
+ */
+
+import type { EnhancementExample } from '@automaker/types';
+
+/**
+ * System prompt for the "improve" enhancement mode.
+ * Transforms vague or unclear requests into clear, actionable task descriptions.
+ */
+export const IMPROVE_SYSTEM_PROMPT = `You are an expert at transforming vague, unclear, or incomplete task descriptions into clear, actionable specifications.
+
+Your task is to take a user's rough description and improve it by:
+
+1. ANALYZE the input:
+   - Identify the core intent behind the request
+   - Note any ambiguities or missing details
+   - Determine what success would look like
+
+2. CLARIFY the scope:
+   - Define clear boundaries for the task
+   - Identify implicit requirements
+   - Add relevant context that may be assumed
+
+3. STRUCTURE the output:
+   - Write a clear, actionable title
+   - Provide a concise description of what needs to be done
+   - Break down into specific sub-tasks if appropriate
+
+4. ENHANCE with details:
+   - Add specific, measurable outcomes where possible
+   - Include edge cases to consider
+   - Note any dependencies or prerequisites
+
+Output ONLY the improved task description. Do not include explanations, markdown formatting, or meta-commentary about your changes.`;
+
+/**
+ * Few-shot examples for the "improve" enhancement mode
+ */
+export const IMPROVE_EXAMPLES: EnhancementExample[] = [
+  {
+    input: 'add dark mode',
+    output: `Add Dark Mode Theme Support
+
+Implement a dark mode option that allows users to switch between light and dark themes throughout the application.
+
+Requirements:
+- Add a theme toggle switch in the settings area
+- Store user's theme preference persistently
+- Apply dark theme colors to all UI components
+- Respect system preference as default if user hasn't set a preference
+- Ensure smooth transition when switching themes`,
+  },
+  {
+    input: 'fix the login bug',
+    output: `Fix Login Authentication Flow
+
+Investigate and resolve issues preventing users from successfully logging in to the application.
+
+Requirements:
+- Identify the specific failure point in the login process
+- Ensure proper credential validation
+- Handle error states with clear user feedback
+- Verify session token is correctly stored after successful login
+- Test with various credential combinations (valid, invalid, edge cases)`,
+  },
+  {
+    input: 'make it faster',
+    output: `Improve Application Performance
+
+Optimize application loading and response times to enhance user experience.
+
+Requirements:
+- Profile current performance to identify bottlenecks
+- Implement code splitting and lazy loading for routes/components
+- Optimize database queries and add appropriate indexes
+- Add caching for frequently accessed data
+- Set performance budget targets (e.g., LCP < 2.5s, FID < 100ms)
+- Measure and document improvements`,
+  },
+];
+
+/**
+ * Description of what this enhancement mode does
+ */
+export const IMPROVE_DESCRIPTION =
+  'Transform vague requests into clear, actionable task descriptions';

libs/prompts/src/enhancement-modes/index.ts

@@ -0,0 +1,27 @@
+/**
+ * Enhancement Modes Index
+ *
+ * Central export point for all enhancement mode definitions.
+ * Each mode exports:
+ * - System prompt constant
+ * - Examples array
+ * - Description string
+ */
+
+export { IMPROVE_SYSTEM_PROMPT, IMPROVE_EXAMPLES, IMPROVE_DESCRIPTION } from './improve.js';
+
+export { TECHNICAL_SYSTEM_PROMPT, TECHNICAL_EXAMPLES, TECHNICAL_DESCRIPTION } from './technical.js';
+
+export { SIMPLIFY_SYSTEM_PROMPT, SIMPLIFY_EXAMPLES, SIMPLIFY_DESCRIPTION } from './simplify.js';
+
+export {
+  ACCEPTANCE_SYSTEM_PROMPT,
+  ACCEPTANCE_EXAMPLES,
+  ACCEPTANCE_DESCRIPTION,
+} from './acceptance.js';
+
+export {
+  UX_REVIEWER_SYSTEM_PROMPT,
+  UX_REVIEWER_EXAMPLES,
+  UX_REVIEWER_DESCRIPTION,
+} from './ux-reviewer.js';

libs/prompts/src/enhancement-modes/simplify.ts

@@ -0,0 +1,74 @@
+/**
+ * "Simplify" Enhancement Mode
+ * Makes verbose descriptions concise and focused.
+ */
+
+import type { EnhancementExample } from '@automaker/types';
+
+/**
+ * System prompt for the "simplify" enhancement mode.
+ * Makes verbose descriptions concise and focused.
+ */
+export const SIMPLIFY_SYSTEM_PROMPT = `You are an expert editor who excels at making verbose text concise without losing meaning.
+
+Your task is to simplify a task description while preserving essential information:
+
+1. IDENTIFY the core message:
+   - Extract the primary goal or requirement
+   - Note truly essential details
+   - Separate nice-to-have from must-have information
+
+2. ELIMINATE redundancy:
+   - Remove repeated information
+   - Cut unnecessary qualifiers and hedging language
+   - Remove filler words and phrases
+
+3. CONSOLIDATE related points:
+   - Merge overlapping requirements
+   - Group related items together
+   - Use concise language
+
+4. PRESERVE critical details:
+   - Keep specific technical requirements
+   - Retain important constraints
+   - Maintain actionable specifics
+
+Output ONLY the simplified description. Aim for 30-50% reduction in length while keeping all essential information. Do not explain your changes.`;
+
+/**
+ * Few-shot examples for the "simplify" enhancement mode
+ */
+export const SIMPLIFY_EXAMPLES: EnhancementExample[] = [
+  {
+    input: `We need to implement a feature that would allow our users to be able to export their data in various different formats. The formats we are thinking about supporting include CSV which is commonly used for spreadsheet applications, and also JSON which is good for developers, and possibly PDF for people who want a printable version. The user should be able to go somewhere in the UI and select which format they want and then download their data in that format. We should probably also show some kind of progress indicator while the export is happening since it might take a while for large datasets.`,
+    output: `Add Data Export Feature
+
+Allow users to export their data in CSV, JSON, or PDF format.
+
+Requirements:
+- Add export button/menu in the UI
+- Support three formats: CSV (spreadsheets), JSON (developers), PDF (printing)
+- Show progress indicator during export
+- Handle large datasets gracefully`,
+  },
+  {
+    input: `The current notification system is not working very well and users are complaining about it. Sometimes they don't receive notifications at all, and other times they receive too many notifications and feel overwhelmed. We also have had reports that the notifications are not appearing correctly on mobile devices. Additionally, some users have requested the ability to customize which types of notifications they receive. We should look into all of these issues and make the notification system work better overall.`,
+    output: `Fix and Improve Notification System
+
+Address reliability issues and add user controls for notifications.
+
+Issues to fix:
+- Missing notifications (delivery reliability)
+- Notification overload (implement batching/digest)
+- Mobile display problems
+
+Enhancements:
+- Add notification preferences (per-type controls)
+- Test across devices and platforms`,
+  },
+];
+
+/**
+ * Description of what this enhancement mode does
+ */
+export const SIMPLIFY_DESCRIPTION = 'Make verbose descriptions concise and focused';

libs/prompts/src/enhancement-modes/technical.ts

@@ -0,0 +1,92 @@
+/**
+ * "Technical" Enhancement Mode
+ * Adds implementation details and technical specifications.
+ */
+
+import type { EnhancementExample } from '@automaker/types';
+
+/**
+ * System prompt for the "technical" enhancement mode.
+ * Adds implementation details and technical specifications.
+ */
+export const TECHNICAL_SYSTEM_PROMPT = `You are a senior software engineer skilled at adding technical depth to feature descriptions.
+
+Your task is to enhance a task description with technical implementation details:
+
+1. ANALYZE the requirement:
+   - Understand the functional goal
+   - Identify the technical domain (frontend, backend, database, etc.)
+   - Consider the likely tech stack based on context
+
+2. ADD technical specifications:
+   - Suggest specific technologies, libraries, or patterns
+   - Define API contracts or data structures if relevant
+   - Note performance considerations
+   - Identify security implications
+
+3. OUTLINE implementation approach:
+   - Break down into technical sub-tasks
+   - Suggest file structure or component organization
+   - Note integration points with existing systems
+
+4. CONSIDER edge cases:
+   - Error handling requirements
+   - Loading and empty states
+   - Boundary conditions
+
+Output ONLY the enhanced technical description. Keep it concise but comprehensive. Do not include explanations about your reasoning.`;
+
+/**
+ * Few-shot examples for the "technical" enhancement mode
+ */
+export const TECHNICAL_EXAMPLES: EnhancementExample[] = [
+  {
+    input: 'Add user profile page',
+    output: `Add User Profile Page
+
+Create a dedicated profile page for viewing and editing user information.
+
+Technical Implementation:
+- Frontend: React component at /profile route with form validation
+- API Endpoint: GET/PUT /api/users/:id for fetching and updating profile
+- Data Model: Extend User schema with profile fields (avatar, bio, preferences)
+- File Upload: Integrate cloud storage for avatar images with client-side resizing
+- State Management: Use optimistic updates for better UX
+- Validation: Server-side validation matching client-side rules
+
+Components:
+- ProfileHeader (avatar, name, edit button)
+- ProfileForm (editable fields with validation)
+- AvatarUploader (drag-drop with preview)
+
+Security: Ensure users can only edit their own profile (auth middleware)`,
+  },
+  {
+    input: 'Add search functionality',
+    output: `Add Search Functionality
+
+Implement full-text search across application content.
+
+Technical Implementation:
+- Search Engine: Use Elasticsearch or PostgreSQL full-text search
+- API: GET /api/search?q={query}&type={type}&page={page}
+- Indexing: Create search index with relevant fields, update on content changes
+- Frontend: Debounced search input (300ms) with typeahead suggestions
+- Results: Paginated results with highlighted matching text
+
+Architecture:
+- SearchService class handling query building and execution
+- SearchIndex worker for background indexing
+- SearchResults component with filtering and sorting
+
+Performance:
+- Implement search result caching (Redis, 5-minute TTL)
+- Limit results per page (20 items)
+- Add query complexity limits to prevent abuse`,
+  },
+];
+
+/**
+ * Description of what this enhancement mode does
+ */
+export const TECHNICAL_DESCRIPTION = 'Add implementation details and technical specifications';

libs/prompts/src/enhancement-modes/ux-reviewer.ts

@@ -0,0 +1,325 @@
+/**
+ * "UX Reviewer" Enhancement Mode
+ * Reviews and enhances task descriptions from a user experience and design perspective.
+ */
+
+import type { EnhancementExample } from '@automaker/types';
+
+/**
+ * System prompt for the "ux-reviewer" enhancement mode.
+ * Reviews and enhances task descriptions from a user experience and design perspective.
+ */
+export const UX_REVIEWER_SYSTEM_PROMPT = `You are a User Experience and Design expert reviewing task descriptions for web applications. Your role is to enhance feature descriptions by incorporating UX principles, accessibility considerations, and design best practices.
+
+# User Experience and Design Guide for Web Applications
+
+A comprehensive guide to creating exceptional user experiences and designs for modern web applications.
+
+## Core UX Principles
+
+### 1. User-Centered Design
+- **Know your users**: Understand who they are, what they need, and what they're trying to accomplish
+- **Empathy first**: Design from the user's perspective, not your own
+- **Solve real problems**: Focus on addressing genuine user pain points, not adding features for the sake of it
+
+### 2. Clarity and Simplicity
+- **Progressive disclosure**: Show only what's necessary, reveal more as needed
+- **Clear hierarchy**: Use visual weight, spacing, and typography to guide attention
+- **Reduce cognitive load**: Minimize the number of decisions users must make
+- **Eliminate unnecessary elements**: Every pixel should serve a purpose
+
+### 3. Consistency
+- **Visual consistency**: Use consistent colors, typography, spacing, and components
+- **Behavioral consistency**: Similar actions should produce similar results
+- **Terminology consistency**: Use the same words for the same concepts throughout
+- **Platform conventions**: Respect user expectations from similar applications
+
+### 4. Feedback and Communication
+- **Immediate feedback**: Users should know their actions were registered
+- **Clear error messages**: Explain what went wrong and how to fix it
+- **Loading states**: Show progress for operations that take time
+- **Success confirmation**: Acknowledge completed actions
+
+### 5. Error Prevention and Recovery
+- **Prevent errors**: Use constraints, defaults, and confirmations for destructive actions
+- **Graceful degradation**: Design for failure scenarios
+- **Easy recovery**: Provide clear paths to undo mistakes
+- **Helpful guidance**: Offer suggestions when users encounter issues
+
+## Design Fundamentals
+
+### Visual Hierarchy
+- Use a clear type scale (e.g., 12px, 14px, 16px, 20px, 24px, 32px)
+- Maintain consistent line heights (1.5-1.75 for body text)
+- Limit font families (typically 1-2 per application)
+- Ensure sufficient contrast (WCAG AA minimum: 4.5:1 for body text, 3:1 for large text)
+- Establish a clear color palette with semantic meaning
+- Use consistent spacing scale (4px or 8px base unit recommended)
+- Group related elements with proximity
+- Use whitespace to create breathing room
+
+### Component Design
+- **Buttons**: Clear visual hierarchy (primary, secondary, tertiary), appropriate sizing for touch targets (minimum 44x44px), clear labels, loading states for async actions
+- **Forms**: Clear labels and helpful placeholder text, inline validation when possible, group related fields, show required vs optional clearly, provide helpful error messages
+- **Navigation**: Consistent placement and behavior, clear current location indicators, breadcrumbs for deep hierarchies, search functionality for large sites
+- **Data Display**: Use tables for structured, comparable data, use cards for varied content types, pagination or infinite scroll for long lists, empty states that guide users, loading skeletons that match content structure
+
+## Accessibility (WCAG 2.1)
+
+### Perceivable
+- Provide text alternatives for images
+- Ensure sufficient color contrast
+- Don't rely solely on color to convey information
+- Use semantic HTML elements
+- Provide captions for multimedia
+
+### Operable
+- Keyboard accessible (all functionality via keyboard)
+- No seizure-inducing content
+- Sufficient time limits with ability to extend
+- Clear navigation and focus indicators
+- Multiple ways to find content
+
+### Understandable
+- Clear, simple language
+- Predictable functionality
+- Help users avoid and correct mistakes
+- Consistent navigation and labeling
+
+### Robust
+- Valid, semantic HTML
+- Proper ARIA labels when needed
+- Compatible with assistive technologies
+- Progressive enhancement approach
+
+## Performance and User Experience
+
+### Perceived Performance
+- Show loading indicators immediately (within 100ms)
+- Use skeleton screens that match content structure
+- Progress indicators for long operations
+- Optimistic UI updates when appropriate
+
+### Performance Targets
+- First Contentful Paint (FCP): < 1.8 seconds
+- Time to Interactive (TTI): < 3.8 seconds
+- Largest Contentful Paint (LCP): < 2.5 seconds
+
+### Performance Best Practices
+- Image optimization: Use modern formats (WebP, AVIF), proper sizing, lazy loading
+- Code splitting: Load only what's needed for each route
+- Caching: Implement appropriate caching strategies
+- Minimize HTTP requests: Combine files, use sprites when appropriate
+- Debounce/throttle: Limit expensive operations (search, scroll handlers)
+
+## Responsive Design
+
+### Mobile-First Approach
+- Mobile: < 640px
+- Tablet: 640px - 1024px
+- Desktop: > 1024px
+- Large desktop: > 1280px
+
+### Key Considerations
+- Touch targets: Minimum 44x44px
+- Readable text without zooming
+- Horizontal scrolling avoided
+- Forms optimized for mobile input
+- Navigation patterns adapted for small screens
+
+## Common Patterns
+
+### Empty States
+- Friendly, helpful messaging
+- Clear call-to-action
+- Illustrations or icons
+- Guidance on what to do next
+
+### Error States
+- Clear error message
+- Explanation of what went wrong
+- Actionable next steps
+- Option to retry or get help
+
+### Loading States
+- Immediate feedback
+- Skeleton screens matching content
+- Progress indicators for known duration
+- Optimistic updates when possible
+
+### Success States
+- Clear confirmation
+- Next steps or related actions
+- Option to undo if applicable
+- Celebration for major milestones
+
+## Modern Web App Considerations
+
+### Progressive Web Apps (PWA)
+- Service workers for offline functionality
+- App-like experience
+- Installable to home screen
+- Push notifications (with permission)
+- Fast loading and responsive
+
+### Dark Mode
+- Provide user preference toggle
+- Respect system preferences
+- Maintain contrast ratios
+- Test all components in both modes
+- Smooth transitions between modes
+
+### Micro-interactions
+- Provide feedback
+- Guide attention
+- Delight users
+- Communicate state changes
+- Use CSS transforms and opacity for smooth animations
+- Duration: 200-300ms for UI transitions, 300-500ms for page transitions
+- Respect \`prefers-reduced-motion\` media query
+
+### AI & Conversational Interfaces
+- **Streaming Responses**: Show text as it generates to reduce perceived latency
+- **Feedback Loops**: Allow users to rate or correct AI outputs
+- **Context Awareness**: Reference previous interactions seamlessly
+- **Trust & Transparency**: Clearly indicate when content is AI-generated
+- **Guided Inputs**: Use chips, templates, or suggestions to help users form queries
+- **Editable History**: Allow users to refine previous prompts without starting over
+
+## Your Task
+
+Review the provided task description and enhance it by:
+
+1. **ANALYZE** the feature from a UX perspective:
+   - Identify user goals and pain points
+   - Consider different user personas and scenarios
+   - Note potential usability issues or edge cases
+
+2. **ENHANCE** with UX considerations:
+   - Add accessibility requirements (keyboard navigation, screen readers, color contrast)
+   - Specify loading, error, and empty states
+   - Include responsive design requirements
+   - Add micro-interaction and feedback details
+   - Consider performance implications
+   - Note consistency with existing design patterns
+
+3. **SPECIFY** design details:
+   - Visual hierarchy and layout considerations
+   - Component patterns to use (buttons, forms, navigation, etc.)
+   - Touch target sizes for mobile
+   - Color and typography requirements
+   - Animation and transition specifications
+
+4. **INCLUDE** UX best practices:
+   - Progressive disclosure patterns
+   - Error prevention and recovery mechanisms
+   - User feedback and confirmation flows
+   - Accessibility compliance (WCAG AA minimum)
+
+Output the enhanced task description with UX considerations integrated naturally. Focus on actionable, specific UX requirements that developers can implement. Do not include explanations about your process.`;
+
+/**
+ * Few-shot examples for the "ux-reviewer" enhancement mode
+ */
+export const UX_REVIEWER_EXAMPLES: EnhancementExample[] = [
+  {
+    input: 'Add user profile page',
+    output: `Add User Profile Page
+
+Create a dedicated profile page for viewing and editing user information with a focus on excellent user experience and accessibility.
+
+UX Requirements:
+- **Layout**: Single-column layout on mobile, two-column layout on desktop (profile info left, edit form right)
+- **Visual Hierarchy**: Profile header with avatar (120x120px), name (24px font), and edit button prominently displayed
+- **Accessibility**: 
+  - All form fields have associated labels
+  - Keyboard navigation support (Tab order: avatar upload → name → bio → save)
+  - Screen reader announcements for form validation
+  - Color contrast ratio of at least 4.5:1 for all text
+  - Focus indicators visible on all interactive elements
+- **Loading States**: 
+  - Skeleton screen matching profile layout while loading
+  - Loading spinner on avatar upload with progress indicator
+  - Disabled state for save button during submission
+- **Error States**: 
+  - Inline validation messages below each field
+  - Clear error message if save fails with retry option
+  - Image upload errors shown with helpful guidance
+- **Empty States**: 
+  - Placeholder avatar with initials if no image uploaded
+  - Empty bio field shows helpful placeholder text
+- **Responsive Design**: 
+  - Touch targets minimum 44x44px on mobile
+  - Form fields full-width on mobile, constrained width on desktop
+  - Avatar upload button large and easy to tap on mobile
+- **Micro-interactions**: 
+  - Smooth transition (200ms) when switching between view/edit modes
+  - Avatar hover effect showing "Change photo" overlay
+  - Form field focus states with subtle border color change
+  - Success toast notification (3s) after successful save
+- **Performance**: 
+  - Lazy load profile image
+  - Optimistic UI update on save (show success immediately, sync in background)
+  - Debounce avatar upload preview (300ms)
+- **Consistency**: 
+  - Use existing design system components (buttons, inputs, modals)
+  - Match spacing and typography from other pages
+  - Follow existing form validation patterns`,
+  },
+  {
+    input: 'Add search functionality',
+    output: `Add Search Functionality
+
+Implement full-text search across application content with an intuitive, accessible interface.
+
+UX Requirements:
+- **Search Input**: 
+  - Prominent search bar in header (desktop) or accessible via icon (mobile)
+  - Clear placeholder text: "Search..." with example query
+  - Debounced input (300ms) to reduce API calls
+  - Clear button (X) appears when text is entered
+  - Keyboard shortcut (Cmd/Ctrl+K) to focus search
+- **Search Results**: 
+  - Results appear in dropdown below search bar (max 8 items)
+  - Highlight matching text in results
+  - Show result type/category badge
+  - "View all results" link at bottom of dropdown
+  - Empty state: "No results found" with suggestion to try different keywords
+- **Results Page**: 
+  - Pagination or infinite scroll (20 items per page)
+  - Filter/sort options clearly visible
+  - Loading skeleton matching result card structure
+  - Keyboard navigation: Arrow keys to navigate results, Enter to select
+- **Accessibility**: 
+  - Search input has aria-label: "Search application content"
+  - Results announced to screen readers: "X results found"
+  - Focus management: Focus moves to first result when dropdown opens
+  - ARIA live region for dynamic result updates
+  - Skip to results link for keyboard users
+- **Mobile Considerations**: 
+  - Full-screen search overlay on mobile
+  - Large touch targets for result items (minimum 44px height)
+  - Bottom sheet for filters on mobile
+  - Recent searches shown below input
+- **Performance**: 
+  - Show loading indicator immediately when user types
+  - Cache recent searches locally
+  - Cancel in-flight requests when new search initiated
+  - Progressive enhancement: Works without JavaScript (form submission fallback)
+- **Micro-interactions**: 
+  - Smooth dropdown animation (200ms ease-out)
+  - Result item hover state with subtle background change
+  - Loading spinner in search input during query
+  - Success animation when result selected
+- **Error Handling**: 
+  - Network error: Show retry button with clear message
+  - Timeout: Suggest checking connection
+  - Empty query: Show helpful tips or recent searches`,
+  },
+];
+
+/**
+ * Description of what this enhancement mode does
+ */
+export const UX_REVIEWER_DESCRIPTION =
+  'Review and enhance from a user experience and design perspective';

libs/prompts/src/enhancement.ts

@@ -6,6 +6,7 @@
  * - Technical: Add implementation details and technical specifications
  * - Simplify: Make verbose descriptions concise and focused
  * - Acceptance: Add testable acceptance criteria
+ * - UX Reviewer: Review and enhance from a user experience and design perspective
  *
  * Uses chain-of-thought prompting with few-shot examples for consistent results.
  */
@@ -15,304 +16,38 @@ import type { EnhancementMode, EnhancementExample } from '@automaker/types';
 // Re-export enhancement types from shared package
 export type { EnhancementMode, EnhancementExample } from '@automaker/types';
 
-/**
- * System prompt for the "improve" enhancement mode.
- * Transforms vague or unclear requests into clear, actionable task descriptions.
- */
-export const IMPROVE_SYSTEM_PROMPT = `You are an expert at transforming vague, unclear, or incomplete task descriptions into clear, actionable specifications.
-
-Your task is to take a user's rough description and improve it by:
-
-1. ANALYZE the input:
-   - Identify the core intent behind the request
-   - Note any ambiguities or missing details
-   - Determine what success would look like
-
-2. CLARIFY the scope:
-   - Define clear boundaries for the task
-   - Identify implicit requirements
-   - Add relevant context that may be assumed
-
-3. STRUCTURE the output:
-   - Write a clear, actionable title
-   - Provide a concise description of what needs to be done
-   - Break down into specific sub-tasks if appropriate
-
-4. ENHANCE with details:
-   - Add specific, measurable outcomes where possible
-   - Include edge cases to consider
-   - Note any dependencies or prerequisites
-
-Output ONLY the improved task description. Do not include explanations, markdown formatting, or meta-commentary about your changes.`;
-
-/**
- * System prompt for the "technical" enhancement mode.
- * Adds implementation details and technical specifications.
- */
-export const TECHNICAL_SYSTEM_PROMPT = `You are a senior software engineer skilled at adding technical depth to feature descriptions.
-
-Your task is to enhance a task description with technical implementation details:
-
-1. ANALYZE the requirement:
-   - Understand the functional goal
-   - Identify the technical domain (frontend, backend, database, etc.)
-   - Consider the likely tech stack based on context
-
-2. ADD technical specifications:
-   - Suggest specific technologies, libraries, or patterns
-   - Define API contracts or data structures if relevant
-   - Note performance considerations
-   - Identify security implications
-
-3. OUTLINE implementation approach:
-   - Break down into technical sub-tasks
-   - Suggest file structure or component organization
-   - Note integration points with existing systems
-
-4. CONSIDER edge cases:
-   - Error handling requirements
-   - Loading and empty states
-   - Boundary conditions
-
-Output ONLY the enhanced technical description. Keep it concise but comprehensive. Do not include explanations about your reasoning.`;
-
-/**
- * System prompt for the "simplify" enhancement mode.
- * Makes verbose descriptions concise and focused.
- */
-export const SIMPLIFY_SYSTEM_PROMPT = `You are an expert editor who excels at making verbose text concise without losing meaning.
-
-Your task is to simplify a task description while preserving essential information:
-
-1. IDENTIFY the core message:
-   - Extract the primary goal or requirement
-   - Note truly essential details
-   - Separate nice-to-have from must-have information
-
-2. ELIMINATE redundancy:
-   - Remove repeated information
-   - Cut unnecessary qualifiers and hedging language
-   - Remove filler words and phrases
-
-3. CONSOLIDATE related points:
-   - Merge overlapping requirements
-   - Group related items together
-   - Use concise language
-
-4. PRESERVE critical details:
-   - Keep specific technical requirements
-   - Retain important constraints
-   - Maintain actionable specifics
-
-Output ONLY the simplified description. Aim for 30-50% reduction in length while keeping all essential information. Do not explain your changes.`;
-
-/**
- * System prompt for the "acceptance" enhancement mode.
- * Adds testable acceptance criteria to task descriptions.
- */
-export const ACCEPTANCE_SYSTEM_PROMPT = `You are a QA specialist skilled at defining testable acceptance criteria for software features.
-
-Your task is to enhance a task description by adding clear acceptance criteria:
-
-1. UNDERSTAND the feature:
-   - Identify all user-facing behaviors
-   - Note system state changes
-   - Consider different user roles or scenarios
-
-2. DEFINE acceptance criteria using Given-When-Then format:
-   - Given: The initial context or preconditions
-   - When: The action or trigger
-   - Then: The expected outcome
-
-3. COVER key scenarios:
-   - Happy path (successful completion)
-   - Edge cases (boundary conditions)
-   - Error scenarios (what should NOT happen)
-   - Performance requirements if relevant
-
-4. MAKE criteria testable:
-   - Use specific, measurable outcomes
-   - Avoid vague terms like "quickly" or "easily"
-   - Include specific values where applicable
-
-Output the original description followed by a clear "Acceptance Criteria:" section with numbered, testable criteria. Do not include explanations about your process.`;
-
-/**
- * Few-shot examples for the "improve" enhancement mode
- */
-export const IMPROVE_EXAMPLES: EnhancementExample[] = [
-  {
-    input: 'add dark mode',
-    output: `Add Dark Mode Theme Support
-
-Implement a dark mode option that allows users to switch between light and dark themes throughout the application.
-
-Requirements:
-- Add a theme toggle switch in the settings area
-- Store user's theme preference persistently
-- Apply dark theme colors to all UI components
-- Respect system preference as default if user hasn't set a preference
-- Ensure smooth transition when switching themes`,
-  },
-  {
-    input: 'fix the login bug',
-    output: `Fix Login Authentication Flow
-
-Investigate and resolve issues preventing users from successfully logging in to the application.
-
-Requirements:
-- Identify the specific failure point in the login process
-- Ensure proper credential validation
-- Handle error states with clear user feedback
-- Verify session token is correctly stored after successful login
-- Test with various credential combinations (valid, invalid, edge cases)`,
-  },
-  {
-    input: 'make it faster',
-    output: `Improve Application Performance
-
-Optimize application loading and response times to enhance user experience.
-
-Requirements:
-- Profile current performance to identify bottlenecks
-- Implement code splitting and lazy loading for routes/components
-- Optimize database queries and add appropriate indexes
-- Add caching for frequently accessed data
-- Set performance budget targets (e.g., LCP < 2.5s, FID < 100ms)
-- Measure and document improvements`,
-  },
-];
-
-/**
- * Few-shot examples for the "technical" enhancement mode
- */
-export const TECHNICAL_EXAMPLES: EnhancementExample[] = [
-  {
-    input: 'Add user profile page',
-    output: `Add User Profile Page
-
-Create a dedicated profile page for viewing and editing user information.
-
-Technical Implementation:
-- Frontend: React component at /profile route with form validation
-- API Endpoint: GET/PUT /api/users/:id for fetching and updating profile
-- Data Model: Extend User schema with profile fields (avatar, bio, preferences)
-- File Upload: Integrate cloud storage for avatar images with client-side resizing
-- State Management: Use optimistic updates for better UX
-- Validation: Server-side validation matching client-side rules
-
-Components:
-- ProfileHeader (avatar, name, edit button)
-- ProfileForm (editable fields with validation)
-- AvatarUploader (drag-drop with preview)
-
-Security: Ensure users can only edit their own profile (auth middleware)`,
-  },
-  {
-    input: 'Add search functionality',
-    output: `Add Search Functionality
-
-Implement full-text search across application content.
-
-Technical Implementation:
-- Search Engine: Use Elasticsearch or PostgreSQL full-text search
-- API: GET /api/search?q={query}&type={type}&page={page}
-- Indexing: Create search index with relevant fields, update on content changes
-- Frontend: Debounced search input (300ms) with typeahead suggestions
-- Results: Paginated results with highlighted matching text
-
-Architecture:
-- SearchService class handling query building and execution
-- SearchIndex worker for background indexing
-- SearchResults component with filtering and sorting
-
-Performance:
-- Implement search result caching (Redis, 5-minute TTL)
-- Limit results per page (20 items)
-- Add query complexity limits to prevent abuse`,
-  },
-];
-
-/**
- * Few-shot examples for the "simplify" enhancement mode
- */
-export const SIMPLIFY_EXAMPLES: EnhancementExample[] = [
-  {
-    input: `We need to implement a feature that would allow our users to be able to export their data in various different formats. The formats we are thinking about supporting include CSV which is commonly used for spreadsheet applications, and also JSON which is good for developers, and possibly PDF for people who want a printable version. The user should be able to go somewhere in the UI and select which format they want and then download their data in that format. We should probably also show some kind of progress indicator while the export is happening since it might take a while for large datasets.`,
-    output: `Add Data Export Feature
-
-Allow users to export their data in CSV, JSON, or PDF format.
-
-Requirements:
-- Add export button/menu in the UI
-- Support three formats: CSV (spreadsheets), JSON (developers), PDF (printing)
-- Show progress indicator during export
-- Handle large datasets gracefully`,
-  },
-  {
-    input: `The current notification system is not working very well and users are complaining about it. Sometimes they don't receive notifications at all, and other times they receive too many notifications and feel overwhelmed. We also have had reports that the notifications are not appearing correctly on mobile devices. Additionally, some users have requested the ability to customize which types of notifications they receive. We should look into all of these issues and make the notification system work better overall.`,
-    output: `Fix and Improve Notification System
-
-Address reliability issues and add user controls for notifications.
-
-Issues to fix:
-- Missing notifications (delivery reliability)
-- Notification overload (implement batching/digest)
-- Mobile display problems
-
-Enhancements:
-- Add notification preferences (per-type controls)
-- Test across devices and platforms`,
-  },
-];
-
-/**
- * Few-shot examples for the "acceptance" enhancement mode
- */
-export const ACCEPTANCE_EXAMPLES: EnhancementExample[] = [
-  {
-    input: 'Add password reset functionality',
-    output: `Add Password Reset Functionality
-
-Allow users to reset their password via email when they forget it.
-
-Acceptance Criteria:
-
-1. Given a user is on the login page, when they click "Forgot Password", then they should see a password reset form requesting their email.
-
-2. Given a user enters a valid registered email, when they submit the form, then they should receive a password reset email within 2 minutes.
-
-3. Given a user clicks the reset link in their email, when the link is less than 1 hour old, then they should see a form to enter a new password.
-
-4. Given a user enters a new valid password (min 8 chars, 1 number, 1 special char), when they submit, then their password should be updated and they should be redirected to login.
-
-5. Given a user enters an unregistered email, when they submit the reset form, then they should see the same success message (security: don't reveal which emails exist).
-
-6. Given a reset link older than 1 hour, when a user clicks it, then they should see an expiration message with option to request a new link.`,
-  },
-  {
-    input: 'Shopping cart checkout',
-    output: `Shopping Cart Checkout
-
-Implement the checkout flow for purchasing items in the shopping cart.
-
-Acceptance Criteria:
-
-1. Given a user has items in their cart, when they click "Checkout", then they should see an order summary with item details and total price.
-
-2. Given a user is on the checkout page, when they enter valid shipping information, then the form should validate in real-time and show estimated delivery date.
-
-3. Given valid shipping info is entered, when the user proceeds to payment, then they should see available payment methods (credit card, PayPal).
-
-4. Given valid payment details are entered, when the user confirms the order, then the payment should be processed and order confirmation displayed within 5 seconds.
-
-5. Given a successful order, when confirmation is shown, then the user should receive an email receipt and their cart should be emptied.
-
-6. Given a payment failure, when the error occurs, then the user should see a clear error message and their cart should remain intact.
-
-7. Given the user closes the browser during checkout, when they return, then their cart contents should still be available.`,
-  },
-];
+// Import all enhancement mode definitions from separate files
+import {
+  IMPROVE_SYSTEM_PROMPT,
+  IMPROVE_EXAMPLES,
+  IMPROVE_DESCRIPTION,
+  TECHNICAL_SYSTEM_PROMPT,
+  TECHNICAL_EXAMPLES,
+  TECHNICAL_DESCRIPTION,
+  SIMPLIFY_SYSTEM_PROMPT,
+  SIMPLIFY_EXAMPLES,
+  SIMPLIFY_DESCRIPTION,
+  ACCEPTANCE_SYSTEM_PROMPT,
+  ACCEPTANCE_EXAMPLES,
+  ACCEPTANCE_DESCRIPTION,
+  UX_REVIEWER_SYSTEM_PROMPT,
+  UX_REVIEWER_EXAMPLES,
+  UX_REVIEWER_DESCRIPTION,
+} from './enhancement-modes/index.js';
+
+// Re-export system prompts and examples for backward compatibility
+export {
+  IMPROVE_SYSTEM_PROMPT,
+  IMPROVE_EXAMPLES,
+  TECHNICAL_SYSTEM_PROMPT,
+  TECHNICAL_EXAMPLES,
+  SIMPLIFY_SYSTEM_PROMPT,
+  SIMPLIFY_EXAMPLES,
+  ACCEPTANCE_SYSTEM_PROMPT,
+  ACCEPTANCE_EXAMPLES,
+  UX_REVIEWER_SYSTEM_PROMPT,
+  UX_REVIEWER_EXAMPLES,
+} from './enhancement-modes/index.js';
 
 /**
  * Map of enhancement modes to their system prompts
@@ -322,6 +57,7 @@ const SYSTEM_PROMPTS: Record<EnhancementMode, string> = {
   technical: TECHNICAL_SYSTEM_PROMPT,
   simplify: SIMPLIFY_SYSTEM_PROMPT,
   acceptance: ACCEPTANCE_SYSTEM_PROMPT,
+  'ux-reviewer': UX_REVIEWER_SYSTEM_PROMPT,
 };
 
 /**
@@ -332,6 +68,7 @@ const EXAMPLES: Record<EnhancementMode, EnhancementExample[]> = {
   technical: TECHNICAL_EXAMPLES,
   simplify: SIMPLIFY_EXAMPLES,
   acceptance: ACCEPTANCE_EXAMPLES,
+  'ux-reviewer': UX_REVIEWER_EXAMPLES,
 };
 
 /**
@@ -348,10 +85,11 @@ export interface EnhancementPromptConfig {
  * Descriptions for each enhancement mode
  */
 const MODE_DESCRIPTIONS: Record<EnhancementMode, string> = {
-  improve: 'Transform vague requests into clear, actionable task descriptions',
-  technical: 'Add implementation details and technical specifications',
-  simplify: 'Make verbose descriptions concise and focused',
-  acceptance: 'Add testable acceptance criteria to task descriptions',
+  improve: IMPROVE_DESCRIPTION,
+  technical: TECHNICAL_DESCRIPTION,
+  simplify: SIMPLIFY_DESCRIPTION,
+  acceptance: ACCEPTANCE_DESCRIPTION,
+  'ux-reviewer': UX_REVIEWER_DESCRIPTION,
 };
 
 /**

libs/prompts/src/merge.ts

@@ -113,6 +113,10 @@ export function mergeEnhancementPrompts(custom?: EnhancementPrompts): ResolvedEn
       custom?.acceptanceSystemPrompt,
       DEFAULT_ENHANCEMENT_PROMPTS.acceptanceSystemPrompt
     ),
+    uxReviewerSystemPrompt: resolvePrompt(
+      custom?.uxReviewerSystemPrompt,
+      DEFAULT_ENHANCEMENT_PROMPTS.uxReviewerSystemPrompt
+    ),
   };
 }
 

libs/types/src/enhancement.ts

@@ -5,7 +5,7 @@
 /**
  * Available enhancement modes for transforming task descriptions
  */
-export type EnhancementMode = 'improve' | 'technical' | 'simplify' | 'acceptance';
+export type EnhancementMode = 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer';
 
 /**
  * Example input/output pair for few-shot learning

libs/types/src/feature.ts

@@ -12,7 +12,7 @@ export interface DescriptionHistoryEntry {
   description: string;
   timestamp: string; // ISO date string
   source: 'initial' | 'enhance' | 'edit'; // What triggered this version
-  enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance'; // Only for 'enhance' source
+  enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'; // Only for 'enhance' source
 }
 
 export interface FeatureImagePath {

libs/types/src/prompts.ts

@@ -89,6 +89,9 @@ export interface EnhancementPrompts {
 
   /** System prompt for "acceptance" mode (add acceptance criteria) */
   acceptanceSystemPrompt?: CustomPrompt;
+
+  /** System prompt for "ux-reviewer" mode (UX and design perspective) */
+  uxReviewerSystemPrompt?: CustomPrompt;
 }
 
 /**
@@ -150,4 +153,5 @@ export interface ResolvedEnhancementPrompts {
   technicalSystemPrompt: string;
   simplifySystemPrompt: string;
   acceptanceSystemPrompt: string;
+  uxReviewerSystemPrompt: string;
 }