feat: add customizable AI prompts with enhanced UX

Add comprehensive prompt customization system allowing users to customize
all AI prompts (Auto Mode, Agent Runner, Backlog Plan, Enhancement) through
the Settings UI.

## Features

### Core Customization System
- New TypeScript types for prompt customization with enabled flag
- CustomPrompt interface with value and enabled state
- Prompts preserved even when disabled (no data loss)
- Merged prompt system (custom overrides defaults when enabled)
- Persistent storage in ~/.automaker/settings.json

### Settings UI
- New "Prompt Customization" section in Settings
- 4 tabs: Auto Mode, Agent, Backlog Plan, Enhancement
- Toggle-based editing (read-only default → editable custom)
- Dynamic textarea height based on prompt length (120px-600px)
- Visual state indicators (Custom/Default labels)

### Warning System
- Critical prompt warnings for Backlog Plan (JSON format requirement)
- Field-level warnings when editing critical prompts
- Info banners for Auto Mode planning markers
- Color-coded warnings (blue=info, amber=critical)

### Backend Integration
- Auto Mode service loads prompts from settings
- Agent service loads prompts from settings
- Backlog Plan service loads prompts from settings
- Enhancement endpoint loads prompts from settings
- Settings sync includes promptCustomization field

### Files Changed
- libs/types/src/prompts.ts - Type definitions
- libs/prompts/src/defaults.ts - Default prompt values
- libs/prompts/src/merge.ts - Merge utilities
- apps/ui/src/components/views/settings-view/prompts/ - UI components
- apps/server/src/lib/settings-helpers.ts - getPromptCustomization()
- All service files updated to use customizable prompts

## Technical Details

Prompt storage format:
```json
{
  "promptCustomization": {
    "autoMode": {
      "planningLite": {
        "value": "Custom prompt text...",
        "enabled": true
      }
    }
  }
}
```

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

apps/server/src/services/agent-service.ts

@@ -23,6 +23,7 @@ import {
   filterClaudeMdFromContext,
   getMCPServersFromSettings,
   getMCPPermissionSettings,
+  getPromptCustomization,
 } from '../lib/settings-helpers.js';
 
 interface Message {
@@ -75,6 +76,7 @@ export class AgentService {
   private metadataFile: string;
   private events: EventEmitter;
   private settingsService: SettingsService | null = null;
+  private agentSystemPrompt: string | null = null;
 
   constructor(dataDir: string, events: EventEmitter, settingsService?: SettingsService) {
     this.stateDir = path.join(dataDir, 'agent-sessions');
@@ -246,7 +248,7 @@ export class AgentService {
       const contextFilesPrompt = filterClaudeMdFromContext(contextResult, autoLoadClaudeMd);
 
       // Build combined system prompt with base prompt and context files
-      const baseSystemPrompt = this.getSystemPrompt();
+      const baseSystemPrompt = await this.getSystemPrompt();
       const combinedSystemPrompt = contextFilesPrompt
         ? `${contextFilesPrompt}\n\n${baseSystemPrompt}`
         : baseSystemPrompt;
@@ -781,38 +783,13 @@ export class AgentService {
     this.events.emit('agent:stream', { sessionId, ...data });
   }
 
-  private getSystemPrompt(): string {
-    return `You are an AI assistant helping users build software. You are part of the Automaker application,
-which is designed to help developers plan, design, and implement software projects autonomously.
-
-**Feature Storage:**
-Features are stored in .automaker/features/{id}/feature.json - each feature has its own folder.
-Use the UpdateFeatureStatus tool to manage features, not direct file edits.
-
-Your role is to:
-- Help users define their project requirements and specifications
-- Ask clarifying questions to better understand their needs
-- Suggest technical approaches and architectures
-- Guide them through the development process
-- Be conversational and helpful
-- Write, edit, and modify code files as requested
-- Execute commands and tests
-- Search and analyze the codebase
-
-When discussing projects, help users think through:
-- Core functionality and features
-- Technical stack choices
-- Data models and architecture
-- User experience considerations
-- Testing strategies
-
-You have full access to the codebase and can:
-- Read files to understand existing code
-- Write new files
-- Edit existing files
-- Run bash commands
-- Search for code patterns
-- Execute tests and builds`;
+  private async getSystemPrompt(): Promise<string> {
+    // Load from settings if not already cached
+    if (!this.agentSystemPrompt) {
+      const prompts = await getPromptCustomization(this.settingsService, '[AgentService]');
+      this.agentSystemPrompt = prompts.agent.systemPrompt;
+    }
+    return this.agentSystemPrompt;
   }
 
   private generateId(): string {

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

@@ -39,6 +39,7 @@ import {
   filterClaudeMdFromContext,
   getMCPServersFromSettings,
   getMCPPermissionSettings,
+  getPromptCustomization,
 } from '../lib/settings-helpers.js';
 
 const execAsync = promisify(exec);
@@ -67,162 +68,6 @@ interface PlanSpec {
   tasks?: ParsedTask[];
 }
 
-const PLANNING_PROMPTS = {
-  lite: `## Planning Phase (Lite Mode)
-
-IMPORTANT: Do NOT output exploration text, tool usage, or thinking before the plan. Start DIRECTLY with the planning outline format below. Silently analyze the codebase first, then output ONLY the structured plan.
-
-Create a brief planning outline:
-
-1. **Goal**: What are we accomplishing? (1 sentence)
-2. **Approach**: How will we do it? (2-3 sentences)
-3. **Files to Touch**: List files and what changes
-4. **Tasks**: Numbered task list (3-7 items)
-5. **Risks**: Any gotchas to watch for
-
-After generating the outline, output:
-"[PLAN_GENERATED] Planning outline complete."
-
-Then proceed with implementation.`,
-
-  lite_with_approval: `## Planning Phase (Lite Mode)
-
-IMPORTANT: Do NOT output exploration text, tool usage, or thinking before the plan. Start DIRECTLY with the planning outline format below. Silently analyze the codebase first, then output ONLY the structured plan.
-
-Create a brief planning outline:
-
-1. **Goal**: What are we accomplishing? (1 sentence)
-2. **Approach**: How will we do it? (2-3 sentences)
-3. **Files to Touch**: List files and what changes
-4. **Tasks**: Numbered task list (3-7 items)
-5. **Risks**: Any gotchas to watch for
-
-After generating the outline, output:
-"[SPEC_GENERATED] Please review the planning outline above. Reply with 'approved' to proceed or provide feedback for revisions."
-
-DO NOT proceed with implementation until you receive explicit approval.`,
-
-  spec: `## Specification Phase (Spec Mode)
-
-IMPORTANT: Do NOT output exploration text, tool usage, or thinking before the spec. Start DIRECTLY with the specification format below. Silently analyze the codebase first, then output ONLY the structured specification.
-
-Generate a specification with an actionable task breakdown. WAIT for approval before implementing.
-
-### Specification Format
-
-1. **Problem**: What problem are we solving? (user perspective)
-
-2. **Solution**: Brief approach (1-2 sentences)
-
-3. **Acceptance Criteria**: 3-5 items in GIVEN-WHEN-THEN format
-   - GIVEN [context], WHEN [action], THEN [outcome]
-
-4. **Files to Modify**:
-   | File | Purpose | Action |
-   |------|---------|--------|
-   | path/to/file | description | create/modify/delete |
-
-5. **Implementation Tasks**:
-   Use this EXACT format for each task (the system will parse these):
-   \`\`\`tasks
-   - [ ] T001: [Description] | File: [path/to/file]
-   - [ ] T002: [Description] | File: [path/to/file]
-   - [ ] T003: [Description] | File: [path/to/file]
-   \`\`\`
-
-   Task ID rules:
-   - Sequential: T001, T002, T003, etc.
-   - Description: Clear action (e.g., "Create user model", "Add API endpoint")
-   - File: Primary file affected (helps with context)
-   - Order by dependencies (foundational tasks first)
-
-6. **Verification**: How to confirm feature works
-
-After generating the spec, output on its own line:
-"[SPEC_GENERATED] Please review the specification above. Reply with 'approved' to proceed or provide feedback for revisions."
-
-DO NOT proceed with implementation until you receive explicit approval.
-
-When approved, execute tasks SEQUENTIALLY in order. For each task:
-1. BEFORE starting, output: "[TASK_START] T###: Description"
-2. Implement the task
-3. AFTER completing, output: "[TASK_COMPLETE] T###: Brief summary"
-
-This allows real-time progress tracking during implementation.`,
-
-  full: `## Full Specification Phase (Full SDD Mode)
-
-IMPORTANT: Do NOT output exploration text, tool usage, or thinking before the spec. Start DIRECTLY with the specification format below. Silently analyze the codebase first, then output ONLY the structured specification.
-
-Generate a comprehensive specification with phased task breakdown. WAIT for approval before implementing.
-
-### Specification Format
-
-1. **Problem Statement**: 2-3 sentences from user perspective
-
-2. **User Story**: As a [user], I want [goal], so that [benefit]
-
-3. **Acceptance Criteria**: Multiple scenarios with GIVEN-WHEN-THEN
-   - **Happy Path**: GIVEN [context], WHEN [action], THEN [expected outcome]
-   - **Edge Cases**: GIVEN [edge condition], WHEN [action], THEN [handling]
-   - **Error Handling**: GIVEN [error condition], WHEN [action], THEN [error response]
-
-4. **Technical Context**:
-   | Aspect | Value |
-   |--------|-------|
-   | Affected Files | list of files |
-   | Dependencies | external libs if any |
-   | Constraints | technical limitations |
-   | Patterns to Follow | existing patterns in codebase |
-
-5. **Non-Goals**: What this feature explicitly does NOT include
-
-6. **Implementation Tasks**:
-   Use this EXACT format for each task (the system will parse these):
-   \`\`\`tasks
-   ## Phase 1: Foundation
-   - [ ] T001: [Description] | File: [path/to/file]
-   - [ ] T002: [Description] | File: [path/to/file]
-
-   ## Phase 2: Core Implementation
-   - [ ] T003: [Description] | File: [path/to/file]
-   - [ ] T004: [Description] | File: [path/to/file]
-
-   ## Phase 3: Integration & Testing
-   - [ ] T005: [Description] | File: [path/to/file]
-   - [ ] T006: [Description] | File: [path/to/file]
-   \`\`\`
-
-   Task ID rules:
-   - Sequential across all phases: T001, T002, T003, etc.
-   - Description: Clear action verb + target
-   - File: Primary file affected
-   - Order by dependencies within each phase
-   - Phase structure helps organize complex work
-
-7. **Success Metrics**: How we know it's done (measurable criteria)
-
-8. **Risks & Mitigations**:
-   | Risk | Mitigation |
-   |------|------------|
-   | description | approach |
-
-After generating the spec, output on its own line:
-"[SPEC_GENERATED] Please review the comprehensive specification above. Reply with 'approved' to proceed or provide feedback for revisions."
-
-DO NOT proceed with implementation until you receive explicit approval.
-
-When approved, execute tasks SEQUENTIALLY by phase. For each task:
-1. BEFORE starting, output: "[TASK_START] T###: Description"
-2. Implement the task
-3. AFTER completing, output: "[TASK_COMPLETE] T###: Brief summary"
-
-After completing all tasks in a phase, output:
-"[PHASE_COMPLETE] Phase N complete"
-
-This allows real-time progress tracking during implementation.`,
-};
-
 /**
  * Parse tasks from generated spec content
  * Looks for the ```tasks code block and extracts task lines
@@ -355,6 +200,7 @@ export class AutoModeService {
   private config: AutoModeConfig | null = null;
   private pendingApprovals = new Map<string, PendingApproval>();
   private settingsService: SettingsService | null = null;
+  private planningPrompts: Record<string, string> | null = null;
 
   constructor(events: EventEmitter, settingsService?: SettingsService) {
     this.events = events;
@@ -593,7 +439,7 @@ export class AutoModeService {
       } else {
         // Normal flow: build prompt with planning phase
         const featurePrompt = this.buildFeaturePrompt(feature);
-        const planningPrefix = this.getPlanningPromptPrefix(feature);
+        const planningPrefix = await this.getPlanningPromptPrefix(feature);
         prompt = planningPrefix + featurePrompt;
 
         // Emit planning mode info
@@ -1756,23 +1602,43 @@ Format your response as a structured markdown document.`;
     return firstLine.substring(0, 57) + '...';
   }
 
+  /**
+   * Load planning prompts from settings
+   */
+  private async loadPlanningPrompts(): Promise<void> {
+    if (this.planningPrompts) {
+      return; // Already loaded
+    }
+
+    const prompts = await getPromptCustomization(this.settingsService, '[AutoMode]');
+    this.planningPrompts = {
+      lite: prompts.autoMode.planningLite,
+      lite_with_approval: prompts.autoMode.planningLiteWithApproval,
+      spec: prompts.autoMode.planningSpec,
+      full: prompts.autoMode.planningFull,
+    };
+  }
+
   /**
    * Get the planning prompt prefix based on feature's planning mode
    */
-  private getPlanningPromptPrefix(feature: Feature): string {
+  private async getPlanningPromptPrefix(feature: Feature): Promise<string> {
     const mode = feature.planningMode || 'skip';
 
     if (mode === 'skip') {
       return ''; // No planning phase
     }
 
+    // Load prompts if not already loaded
+    await this.loadPlanningPrompts();
+
     // For lite mode, use the approval variant if requirePlanApproval is true
     let promptKey: string = mode;
     if (mode === 'lite' && feature.requirePlanApproval === true) {
       promptKey = 'lite_with_approval';
     }
 
-    const planningPrompt = PLANNING_PROMPTS[promptKey as keyof typeof PLANNING_PROMPTS];
+    const planningPrompt = this.planningPrompts![promptKey];
     if (!planningPrompt) {
       return '';
     }