Merge pull request #82 from AndyMik90/v2.6.5

V2.6.5
fix: address CI linting issues
2025-12-21 00:58:28 +01:00 · 2025-12-21 00:51:37 +01:00 · 2025-12-21 00:43:49 +01:00 · 2025-12-21 00:31:23 +01:00 · 2025-12-21 00:27:55 +01:00 · 2025-12-21 00:26:26 +01:00
147 changed files with 9189 additions and 1487 deletions
@@ -1,3 +1,162 @@
+## 2.6.0 - Improved User Experience and Agent Configuration
+
+### ✨ New Features
+
+- Add customizable phase configuration in app settings, allowing users to tailor the AI build pipeline to their workflow
+
+- Implement parallel AI merge functionality for faster integration of completed builds
+
+- Add Google AI as LLM and embedding provider for Graphiti memory system
+
+- Implement device code authentication flow with timeout handling, browser launch fallback, and comprehensive testing
+
+### 🛠️ Improvements
+
+- Move Agent Profiles from dashboard to Settings for better organization and discoverability
+
+- Default agent profile to 'Auto (Optimized)' for streamlined out-of-the-box experience
+
+- Enhance WorkspaceStatus component UI with improved visual design
+
+- Refactor task management from sidebar to modal interface for cleaner navigation
+
+- Add comprehensive theme system with multiple color schemes (Forest, Neo, Retro, Dusk, Ocean, Lime) and light/dark mode support
+
+- Extract human-readable feature titles from spec.md for better task identification
+
+- Improve task description display for specs with compact markdown formatting
+
+### 🐛 Bug Fixes
+
+- Fix asyncio coroutine creation in worker threads to properly support async operations
+
+- Improve UX for phase configuration in task creation workflow
+
+- Address CodeRabbit PR #69 feedback and additional review comments
+
+- Fix auto-close behavior for task modal when marking tasks as done
+
+- Resolve Python lint errors and import sorting issues (ruff I001 compliance)
+
+- Ensure planner agent properly writes implementation_plan.json
+
+- Add platform detection for terminal profile commands on Windows
+
+- Set default selected agent profile to 'auto' across all users
+
+- Fix display of correct merge target branch in worktree UI
+
+- Add validation for invalid colorTheme fallback to prevent UI errors
+
+- Remove outdated Sun/Moon toggle button from sidebar
+
+---
+
+## What's Changed
+
+- feat: add customizable phase configuration in app settings by @AndyMik90 in aee0ba4
+
+- feat: implement parallel AI merge functionality by @AndyMik90 in 458d4bb
+
+- feat(graphiti): add Google AI as LLM and embedding provider by @adryserage in fe69106
+
+- fix: create coroutine inside worker thread for asyncio.run by @AndyMik90 in f89e4e6
+
+- fix: improve UX for phase configuration in task creation by @AndyMik90 in b9797cb
+
+- fix: address CodeRabbit PR #69 feedback by @AndyMik90 in cc38a06
+
+- fix: sort imports in workspace.py to pass ruff I001 check by @AndyMik90 in 9981ee4
+
+- fix(ui): auto-close task modal when marking task as done by @AndyMik90 in 297d380
+
+- fix: resolve Python lint errors in workspace.py by @AndyMik90 in 0506256
+
+- refactor: move Agent Profiles from dashboard to Settings by @AndyMik90 in 1094990
+
+- fix(planning): ensure planner agent writes implementation_plan.json by @AndyMik90 in 9ab5a4f
+
+- fix(windows): add platform detection for terminal profile commands by @AndyMik90 in f0a6a0a
+
+- fix: default agent profile to 'Auto (Optimized)' for all users by @AndyMik90 in 08aa2ff
+
+- fix: update default selected agent profile to 'auto' by @AndyMik90 in 37ace0a
+
+- style: enhance WorkspaceStatus component UI by @AndyMik90 in 3092155
+
+- fix: display correct merge target branch in worktree UI by @AndyMik90 in 2b96160
+
+- Improvement/refactor task sidebar to task modal by @AndyMik90 in 2a96f85
+
+- fix: extract human-readable title from spec.md when feature field is spec ID by @AndyMik90 in 8b59375
+
+- fix: task descriptions not showing for specs with compact markdown by @AndyMik90 in 7f12ef0
+
+- Add comprehensive theme system with Forest, Neo, Retro, Dusk, Ocean, and Lime color schemes by @AndyMik90 in ba776a3, e2b24e2, 7589046, e248256, 76c1bd7, bcbced2
+
+- Add ColorTheme type and configuration to app settings by @AndyMik90 in 2ca89ce, c505d6e, a75c0a9
+
+- Implement device code authentication flow with timeout handling and fallback URL display by @AndyMik90 in 5f26d39, 81e1536, 1a7cf40, 4a4ad6b, 6a4c1b4, b75a09c, e134c4c
+
+- fix(graphiti): address CodeRabbit review comments by @adryserage in 679b8cd
+
+- fix(lint): sort imports in Google provider files by @adryserage in 1a38a06
+
+## 2.6.0 - Multi-Provider Graphiti Support & Platform Fixes
+
+### ✨ New Features
+
+- **Google AI Provider for Graphiti**: Full Google AI (Gemini) support for both LLM and embeddings in the Memory Layer
+  - Add GoogleLLMClient with gemini-2.0-flash default model
+  - Add GoogleEmbedder with text-embedding-004 default model
+  - UI integration for Google API key configuration with link to Google AI Studio
+- **Ollama LLM Provider in UI**: Add Ollama as an LLM provider option in Graphiti onboarding wizard
+  - Ollama runs locally and doesn't require an API key
+  - Configure Base URL instead of API key for local inference
+- **LLM Provider Selection UI**: Add provider selection dropdown to Graphiti setup wizard for flexible backend configuration
+- **Per-Project GitHub Configuration**: UI clarity improvements for per-project GitHub org/repo settings
+
+### 🛠️ Improvements
+
+- Enhanced Graphiti provider factory to support Google AI alongside existing providers
+- Updated env-handlers to properly populate graphitiProviderConfig from .env files
+- Improved type definitions with proper Graphiti provider config properties in AppSettings
+- Better API key loading when switching between providers in settings
+
+### 🐛 Bug Fixes
+
+- **node-pty Migration**: Replaced node-pty with @lydell/node-pty for prebuilt Windows binaries
+  - Updated all imports to use @lydell/node-pty directly
+  - Fixed "Cannot find module 'node-pty'" startup error
+- **GitHub Organization Support**: Fixed repository support for GitHub organization accounts
+  - Add defensive array validation for GitHub issues API response
+- **Asyncio Deprecation**: Fixed asyncio deprecation warning by using get_running_loop() instead of get_event_loop()
+- Applied ruff formatting and fixed import sorting (I001) in Google provider files
+
+### 🔧 Other Changes
+
+- Added google-generativeai dependency to requirements.txt
+- Updated provider validation to include Google/Groq/HuggingFace type assertions
+
+---
+
+## What's Changed
+
+- fix(graphiti): address CodeRabbit review comments by @adryserage in 679b8cd
+- fix(lint): sort imports in Google provider files by @adryserage in 1a38a06
+- feat(graphiti): add Google AI as LLM and embedding provider by @adryserage in fe69106
+- fix: GitHub organization repository support by @mojaray2k in 873cafa
+- feat(ui): add LLM provider selection to Graphiti onboarding by @adryserage in 4750869
+- fix(types): add missing AppSettings properties for Graphiti providers by @adryserage in 6680ed4
+- feat(ui): add Ollama as LLM provider option for Graphiti by @adryserage in a3eee92
+- fix(ui): address PR review feedback for Graphiti provider selection by @adryserage in b8a419a
+- fix(deps): update imports to use @lydell/node-pty directly by @adryserage in 2b61ebb
+- fix(deps): replace node-pty with @lydell/node-pty for prebuilt binaries by @adryserage in e1aee6a
+- fix: add UI clarity for per-project GitHub configuration by @mojaray2k in c9745b6
+- fix: add defensive array validation for GitHub issues API response by @mojaray2k in b3636a5
+
+---
+
 ## 2.5.5 - Enhanced Agent Reliability & Build Workflow

 ### ✨ New Features
@@ -118,7 +118,7 @@ See [RELEASE.md](RELEASE.md) for detailed release process documentation.
 - **worktree.py** - Git worktree isolation for safe feature development
 - **memory.py** - File-based session memory (primary, always-available storage)
 - **graphiti_memory.py** - Optional graph-based cross-session memory with semantic search
- **graphiti_providers.py** - Multi-provider factory for Graphiti (OpenAI, Anthropic, Azure, Ollama)
+- **graphiti_providers.py** - Multi-provider factory for Graphiti (OpenAI, Anthropic, Azure, Ollama, Google AI)
 - **graphiti_config.py** - Configuration and validation for Graphiti integration
 - **linear_updater.py** - Optional Linear integration for progress tracking

@@ -192,8 +192,8 @@ Dual-layer memory architecture:
 - Graph database with semantic search (FalkorDB)
 - Cross-session context retrieval
 - Multi-provider support (V2):
-  - LLM: OpenAI, Anthropic, Azure OpenAI, Ollama
-  - Embedders: OpenAI, Voyage AI, Azure OpenAI, Ollama
+  - LLM: OpenAI, Anthropic, Azure OpenAI, Ollama, Google AI (Gemini)
+  - Embedders: OpenAI, Voyage AI, Azure OpenAI, Ollama, Google AI

 Enable with: `GRAPHITI_ENABLED=true` + provider credentials. See `.env.example`.

@@ -248,12 +248,13 @@ The Memory Layer is a **hybrid RAG system** combining graph nodes with semantic
 **Architecture:**
 - **Backend**: FalkorDB (graph database) via Docker
 - **Library**: Graphiti for knowledge graph operations
- **Providers**: OpenAI, Anthropic, Azure OpenAI, or Ollama (local/offline)
+- **Providers**: OpenAI, Anthropic, Azure OpenAI, Google AI, or Ollama (local/offline)

 | Setup | LLM | Embeddings | Notes |
 |-------|-----|------------|-------|
 | **OpenAI** | OpenAI | OpenAI | Simplest - single API key |
 | **Anthropic + Voyage** | Anthropic | Voyage AI | High quality |
+| **Google AI** | Gemini | Google | Single API key, fast inference |
 | **Ollama** | Ollama | Ollama | Fully offline |
 | **Azure** | Azure OpenAI | Azure OpenAI | Enterprise |

@@ -309,11 +310,12 @@ The `.auto-claude/` directory is gitignored and project-specific - you'll have o
 | `CLAUDE_CODE_OAUTH_TOKEN` | Yes | OAuth token from `claude setup-token` |
 | `AUTO_BUILD_MODEL` | No | Model override (default: claude-opus-4-5-20251101) |
 | `GRAPHITI_ENABLED` | Recommended | Set to `true` to enable Memory Layer |
-| `GRAPHITI_LLM_PROVIDER` | For Memory | LLM provider: openai, anthropic, azure_openai, ollama |
-| `GRAPHITI_EMBEDDER_PROVIDER` | For Memory | Embedder: openai, voyage, azure_openai, ollama |
+| `GRAPHITI_LLM_PROVIDER` | For Memory | LLM provider: openai, anthropic, azure_openai, ollama, google |
+| `GRAPHITI_EMBEDDER_PROVIDER` | For Memory | Embedder: openai, voyage, azure_openai, ollama, google |
 | `OPENAI_API_KEY` | For OpenAI | Required for OpenAI provider |
 | `ANTHROPIC_API_KEY` | For Anthropic | Required for Anthropic LLM |
 | `VOYAGE_API_KEY` | For Voyage | Required for Voyage embeddings |
+| `GOOGLE_API_KEY` | For Google | Required for Google AI (Gemini) provider |

 See `auto-claude/.env.example` for complete configuration options.

@@ -5,23 +5,20 @@
 # DEBUG SETTINGS
 # ============================================

-# Enable general debug logging for ideation and roadmap features
+# Enable debug logging across the entire application
 # When enabled, you'll see detailed console logs for:
-# - Ideation generation and stop functionality
-# - Roadmap generation and stop functionality
+# - Ideation and roadmap generation
 # - IPC communication between processes
 # - Store state updates
+# - Changelog generation and project initialization
+# - GitHub OAuth flow
 # Usage: Set to 'true' before starting the app
 # DEBUG=true

-# Enable debug logging for the auto-updater
+# Enable debug logging for the auto-updater only
 # Shows detailed information about app update checks and downloads
 # DEBUG_UPDATER=true

-# Enable debug logging for Auto Claude features
-# Affects changelog generation, project initialization, and other core features
-# AUTO_CLAUDE_DEBUG=true
-
 # ============================================
 # HOW TO USE
 # ============================================
@@ -31,7 +28,6 @@
 #
 # Option 2: Export in your shell profile (~/.bashrc, ~/.zshrc, etc.)
 #   export DEBUG=true
-#   export AUTO_CLAUDE_DEBUG=true
 #
 # Option 3: Create a .env file in this directory (auto-claude-ui/)
 #   Copy this file: cp .env.example .env
@@ -1,12 +1,12 @@
 {
  "name": "auto-claude-ui",
-  "version": "2.3.0",
+  "version": "2.6.5",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "auto-claude-ui",
-      "version": "2.3.0",
+      "version": "2.6.5",
      "hasInstallScript": true,
      "license": "AGPL-3.0",
      "dependencies": {
@@ -150,7 +150,6 @@
      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.5",
@@ -536,7 +535,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=18"
      },
@@ -560,7 +558,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=18"
      }
@@ -600,7 +597,6 @@
      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@dnd-kit/accessibility": "^3.1.1",
        "@dnd-kit/utilities": "^3.2.2",
@@ -995,6 +991,7 @@
      "dev": true,
      "license": "BSD-2-Clause",
      "optional": true,
+      "peer": true,
      "dependencies": {
        "cross-dirname": "^0.1.0",
        "debug": "^4.3.4",
@@ -1016,6 +1013,7 @@
      "dev": true,
      "license": "MIT",
      "optional": true,
+      "peer": true,
      "dependencies": {
        "graceful-fs": "^4.2.0",
        "jsonfile": "^6.0.1",
@@ -3930,7 +3928,8 @@
      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/@types/babel__core": {
      "version": "7.20.5",
@@ -4127,7 +4126,6 @@
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "csstype": "^3.2.2"
      }
@@ -4138,7 +4136,6 @@
      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
      "devOptional": true,
      "license": "MIT",
-      "peer": true,
      "peerDependencies": {
        "@types/react": "^19.2.0"
      }
@@ -4230,7 +4227,6 @@
      "integrity": "sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.49.0",
        "@typescript-eslint/types": "8.49.0",
@@ -4630,8 +4626,7 @@
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/7zip-bin": {
      "version": "5.2.0",
@@ -4653,7 +4648,6 @@
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -4714,7 +4708,6 @@
      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
        "fast-json-stable-stringify": "^2.0.0",
@@ -4887,6 +4880,7 @@
      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
      "dev": true,
      "license": "Apache-2.0",
+      "peer": true,
      "dependencies": {
        "dequal": "^2.0.3"
      }
@@ -5271,7 +5265,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.9.0",
        "caniuse-lite": "^1.0.30001759",
@@ -5951,7 +5944,8 @@
      "integrity": "sha512-+R08/oI0nl3vfPcqftZRpytksBXDzOUveBq/NBVx0sUp1axwzPQrKinNx5yd5sxPu8j1wIy8AfnVQ+5eFdha6Q==",
      "dev": true,
      "license": "MIT",
-      "optional": true
+      "optional": true,
+      "peer": true
    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
@@ -6295,7 +6289,6 @@
      "integrity": "sha512-59CAAjAhTaIMCN8y9kD573vDkxbs1uhDcrFLHSgutYdPcGOU35Rf95725snvzEOy4BFB7+eLJ8djCNPmGwG67w==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "app-builder-lib": "26.0.12",
        "builder-util": "26.0.11",
@@ -6353,7 +6346,8 @@
      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/dotenv": {
      "version": "16.6.1",
@@ -6429,7 +6423,6 @@
      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@electron/get": "^2.0.0",
        "@types/node": "^22.7.7",
@@ -6558,6 +6551,7 @@
      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@electron/asar": "^3.2.1",
        "debug": "^4.1.1",
@@ -6578,6 +6572,7 @@
      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "graceful-fs": "^4.1.2",
        "jsonfile": "^4.0.0",
@@ -6593,6 +6588,7 @@
      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "optionalDependencies": {
        "graceful-fs": "^4.1.6"
      }
@@ -6603,6 +6599,7 @@
      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">= 4.0.0"
      }
@@ -6972,7 +6969,6 @@
      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -8992,7 +8988,6 @@
      "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "cssstyle": "^4.2.1",
        "data-urls": "^5.0.0",
@@ -9936,6 +9931,7 @@
      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "lz-string": "bin/bin.js"
      }
@@ -11775,7 +11771,6 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -11873,7 +11868,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -11910,6 +11904,7 @@
      "dev": true,
      "license": "MIT",
      "optional": true,
+      "peer": true,
      "dependencies": {
        "commander": "^9.4.0"
      },
@@ -11927,6 +11922,7 @@
      "dev": true,
      "license": "MIT",
      "optional": true,
+      "peer": true,
      "engines": {
        "node": "^12.20.0 || >=14"
      }
@@ -11947,6 +11943,7 @@
      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "ansi-regex": "^5.0.1",
        "ansi-styles": "^5.0.0",
@@ -11962,6 +11959,7 @@
      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=10"
      },
@@ -11974,7 +11972,8 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
      "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/proc-log": {
      "version": "2.0.1",
@@ -12078,7 +12077,6 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -12088,7 +12086,6 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@@ -13405,8 +13402,7 @@
      "version": "4.1.18",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/tapable": {
      "version": "2.3.0",
@@ -13463,6 +13459,7 @@
      "integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "mkdirp": "^0.5.1",
        "rimraf": "~2.6.2"
@@ -13489,6 +13486,7 @@
      "deprecated": "Glob versions prior to v9 are no longer supported",
      "dev": true,
      "license": "ISC",
+      "peer": true,
      "dependencies": {
        "fs.realpath": "^1.0.0",
        "inflight": "^1.0.4",
@@ -13510,6 +13508,7 @@
      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
      "dev": true,
      "license": "ISC",
+      "peer": true,
      "dependencies": {
        "brace-expansion": "^1.1.7"
      },
@@ -13523,6 +13522,7 @@
      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "minimist": "^1.2.6"
      },
@@ -13537,6 +13537,7 @@
      "deprecated": "Rimraf versions prior to v4 are no longer supported",
      "dev": true,
      "license": "ISC",
+      "peer": true,
      "dependencies": {
        "glob": "^7.1.3"
      },
@@ -13853,7 +13854,6 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "dev": true,
      "license": "Apache-2.0",
-      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -14194,7 +14194,6 @@
      "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "esbuild": "^0.27.0",
        "fdir": "^6.5.0",
@@ -15228,7 +15227,6 @@
      "integrity": "sha512-Bd5fw9wlIhtqCCxotZgdTOMwGm1a0u75wARVEY9HMs1X17trvA/lMi4+MGK5EUfYkXVTbX8UDiDKW4OgzHVUZw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
@@ -1,6 +1,6 @@
 {
  "name": "auto-claude-ui",
-  "version": "2.5.6",
+  "version": "2.6.5",
  "description": "Desktop UI for Auto Claude autonomous coding framework",
  "main": "./out/main/index.js",
  "author": "Auto Claude Team",
@@ -8,8 +8,10 @@
  "scripts": {
    "postinstall": "node scripts/postinstall.js",
    "dev": "electron-vite dev",
+    "dev:mcp": "electron-vite dev -- --remote-debugging-port=9222",
    "build": "electron-vite build",
    "start": "electron .",
+    "start:mcp": "electron . --remote-debugging-port=9222",
    "preview": "electron-vite preview",
    "package": "electron-vite build && electron-builder",
    "package:mac": "electron-vite build && electron-builder --mac",
@@ -39,6 +39,14 @@ vi.mock('@electron-toolkit/utils', () => ({
  }
 }));

+// Mock version-manager to return a predictable version
+vi.mock('../updater/version-manager', () => ({
+  getEffectiveVersion: vi.fn(() => '0.1.0'),
+  getBundledVersion: vi.fn(() => '0.1.0'),
+  parseVersionFromTag: vi.fn((tag: string) => tag.replace('v', '')),
+  compareVersions: vi.fn(() => 0)
+}));
+
 // Mock modules before importing
 vi.mock('electron', () => {
  const mockIpcMain = new (class extends EventEmitter {
@@ -9,8 +9,9 @@ import { getClaudeProfileManager } from '../claude-profile-manager';
 import {
  SpecCreationMetadata,
  TaskExecutionOptions,
-  IdeationConfig
+  RoadmapConfig
 } from './types';
+import type { IdeationConfig } from '../../shared/types';

 /**
 * Main AgentManager - orchestrates agent process lifecycle
@@ -243,9 +244,11 @@ export class AgentManager extends EventEmitter {
    projectId: string,
    projectPath: string,
    refresh: boolean = false,
-    enableCompetitorAnalysis: boolean = false
+    enableCompetitorAnalysis: boolean = false,
+    refreshCompetitorAnalysis: boolean = false,
+    config?: RoadmapConfig
  ): void {
-    this.queueManager.startRoadmapGeneration(projectId, projectPath, refresh, enableCompetitorAnalysis);
+    this.queueManager.startRoadmapGeneration(projectId, projectPath, refresh, enableCompetitorAnalysis, refreshCompetitorAnalysis, config);
  }

  /**
@@ -5,7 +5,9 @@ import { EventEmitter } from 'events';
 import { AgentState } from './agent-state';
 import { AgentEvents } from './agent-events';
 import { AgentProcessManager } from './agent-process';
-import { IdeationConfig } from './types';
+import { RoadmapConfig } from './types';
+import type { IdeationConfig } from '../../shared/types';
+import { MODEL_ID_MAP } from '../../shared/constants';
 import { detectRateLimit, createSDKRateLimitInfo, getProfileEnv } from '../rate-limit-detector';
 import { debugLog, debugError } from '../../shared/utils/debug-logger';
 import { parsePythonCommand } from '../python-detector';
@@ -33,18 +35,26 @@ export class AgentQueueManager {

  /**
   * Start roadmap generation process
+   *
+   * @param refreshCompetitorAnalysis - Force refresh competitor analysis even if it exists.
+   *   This allows refreshing competitor data independently of the general roadmap refresh.
+   *   Use when user explicitly wants new competitor research.
   */
  startRoadmapGeneration(
    projectId: string,
    projectPath: string,
    refresh: boolean = false,
-    enableCompetitorAnalysis: boolean = false
+    enableCompetitorAnalysis: boolean = false,
+    refreshCompetitorAnalysis: boolean = false,
+    config?: RoadmapConfig
  ): void {
    debugLog('[Agent Queue] Starting roadmap generation:', {
      projectId,
      projectPath,
      refresh,
-      enableCompetitorAnalysis
+      enableCompetitorAnalysis,
+      refreshCompetitorAnalysis,
+      config
    });

    const autoBuildSource = this.processManager.getAutoBuildSourcePath();
@@ -74,6 +84,20 @@ export class AgentQueueManager {
      args.push('--competitor-analysis');
    }

+    // Add refresh competitor analysis flag if user wants fresh competitor data
+    if (refreshCompetitorAnalysis) {
+      args.push('--refresh-competitor-analysis');
+    }
+
+    // Add model and thinking level from config
+    if (config?.model) {
+      const modelId = MODEL_ID_MAP[config.model] || MODEL_ID_MAP['opus'];
+      args.push('--model', modelId);
+    }
+    if (config?.thinkingLevel) {
+      args.push('--thinking-level', config.thinkingLevel);
+    }
+
    debugLog('[Agent Queue] Spawning roadmap process with args:', args);

    // Use projectId as taskId for roadmap operations
@@ -141,6 +165,15 @@ export class AgentQueueManager {
      args.push('--append');
    }

+    // Add model and thinking level from config
+    if (config.model) {
+      const modelId = MODEL_ID_MAP[config.model] || MODEL_ID_MAP['opus'];
+      args.push('--model', modelId);
+    }
+    if (config.thinkingLevel) {
+      args.push('--thinking-level', config.thinkingLevel);
+    }
+
    debugLog('[Agent Queue] Spawning ideation process with args:', args);

    // Use projectId as taskId for ideation operations
@@ -318,6 +351,15 @@ export class AgentQueueManager {
    childProcess.on('exit', (code: number | null) => {
      debugLog('[Agent Queue] Ideation process exited:', { projectId, code, spawnId });

+      // Check if this process was intentionally stopped by the user
+      const wasIntentionallyStopped = this.state.wasSpawnKilled(spawnId);
+      if (wasIntentionallyStopped) {
+        debugLog('[Agent Queue] Ideation process was intentionally stopped, ignoring exit');
+        this.state.clearKilledSpawn(spawnId);
+        this.state.deleteProcess(projectId);
+        return;
+      }
+
      // Get the stored project path before deleting from map
      const processInfo = this.state.getProcess(projectId);
      const storedProjectPath = processInfo?.projectPath;
@@ -517,6 +559,15 @@ export class AgentQueueManager {
    childProcess.on('exit', (code: number | null) => {
      debugLog('[Agent Queue] Roadmap process exited:', { projectId, code, spawnId });

+      // Check if this process was intentionally stopped by the user
+      const wasIntentionallyStopped = this.state.wasSpawnKilled(spawnId);
+      if (wasIntentionallyStopped) {
+        debugLog('[Agent Queue] Roadmap process was intentionally stopped, ignoring exit');
+        this.state.clearKilledSpawn(spawnId);
+        this.state.deleteProcess(projectId);
+        return;
+      }
+
      // Get the stored project path before deleting from map
      const processInfo = this.state.getProcess(projectId);
      const storedProjectPath = processInfo?.projectPath;
@@ -20,9 +20,11 @@ export type {
  ExecutionProgressData,
  ProcessType,
  AgentManagerEvents,
-  IdeationConfig,
  TaskExecutionOptions,
  SpecCreationMetadata,
  IdeationProgressData,
  RoadmapProgressData
 } from './types';
+
+// Re-export IdeationConfig from shared types for consistency
+export type { IdeationConfig } from '../../shared/types';
@@ -1,4 +1,5 @@
 import { ChildProcess } from 'child_process';
+import type { IdeationConfig } from '../../shared/types';

 /**
 * Agent-specific types for process and state management
@@ -32,12 +33,11 @@ export interface AgentManagerEvents {
  'execution-progress': (taskId: string, progress: ExecutionProgressData) => void;
 }

-export interface IdeationConfig {
-  enabledTypes: string[];
-  includeRoadmapContext: boolean;
-  includeKanbanContext: boolean;
-  maxIdeasPerType: number;
-  append?: boolean;
+// IdeationConfig now imported from shared types to maintain consistency
+
+export interface RoadmapConfig {
+  model?: string;          // Model shorthand (opus, sonnet, haiku)
+  thinkingLevel?: string;  // Thinking level (none, low, medium, high, ultrathink)
 }

 export interface TaskExecutionOptions {
@@ -23,8 +23,8 @@ import type { BrowserWindow } from 'electron';
 import { IPC_CHANNELS } from '../shared/constants';
 import type { AppUpdateInfo } from '../shared/types';

-// Debug mode - set via environment variable
-const DEBUG_UPDATER = process.env.DEBUG_UPDATER === 'true' || process.env.DEBUG === 'true';
+// Debug mode - DEBUG_UPDATER=true or development mode
+const DEBUG_UPDATER = process.env.DEBUG_UPDATER === 'true' || process.env.NODE_ENV === 'development';

 // Configure electron-updater
 autoUpdater.autoDownload = true;  // Automatically download updates when available
@@ -91,7 +91,7 @@ export class ChangelogService extends EventEmitter {

  /**
   * Check if debug mode is enabled
-   * Checks DEBUG from auto-claude/.env and AUTO_CLAUDE_DEBUG from process.env
+   * Checks DEBUG from auto-claude/.env and DEBUG from process.env
   */
  private isDebugEnabled(): boolean {
    // Cache the result after first check
@@ -103,8 +103,8 @@ export class ChangelogService extends EventEmitter {
    if (
      process.env.DEBUG === 'true' ||
      process.env.DEBUG === '1' ||
-      process.env.AUTO_CLAUDE_DEBUG === 'true' ||
-      process.env.AUTO_CLAUDE_DEBUG === '1'
+      process.env.DEBUG === 'true' ||
+      process.env.DEBUG === '1'
    ) {
      this.debugEnabled = true;
      return true;
@@ -117,7 +117,7 @@ export class ChangelogService extends EventEmitter {
  }

  /**
-   * Debug logging - only logs when DEBUG=true in auto-claude/.env or AUTO_CLAUDE_DEBUG is set
+   * Debug logging - only logs when DEBUG=true in auto-claude/.env or DEBUG is set
   */
  private debug(...args: unknown[]): void {
    if (this.isDebugEnabled()) {
@@ -49,7 +49,11 @@ const FORMAT_TEMPLATES = {

 ## What's Changed

- type: description by @contributor in commit-hash`
+- type: description by @contributor in commit-hash
+
+## Thanks to all contributors
+
+@contributor1, @contributor2`
 };

 /**
@@ -274,7 +278,15 @@ PART 2 - "What's Changed" (raw commit list):
 - Example: "- feat: add dark mode support by @contributor in def5678"
 - Include the commit type prefix (feat:, fix:, docs:, etc.)
 - Show the author name with @ prefix
- Show the short commit hash at the end`;
+- Show the short commit hash at the end
+
+PART 3 - "Thanks to all contributors" (deduplicated list):
+- Add this section after "What's Changed"
+- Extract all unique contributor names from the commits
+- List them in a comma-separated format with @ prefix
+- Example: "## Thanks to all contributors\\n\\n@contributor1, @contributor2, @contributor3"
+- Only include unique names (no duplicates)
+- This acknowledges everyone who contributed to this release`;
  }

  return `${audienceInstruction}
@@ -99,7 +99,9 @@ export class UsageMonitor extends EventEmitter {
      }

      // Fetch current usage (hybrid approach)
-      const usage = await this.fetchUsage(activeProfile.id, activeProfile.oauthToken);
+      // Get decrypted token from ProfileManager (activeProfile.oauthToken is encrypted)
+      const decryptedToken = profileManager.getProfileToken(activeProfile.id);
+      const usage = await this.fetchUsage(activeProfile.id, decryptedToken ?? undefined);
      if (!usage) {
        console.warn('[UsageMonitor] Failed to fetch usage');
        return;
@@ -141,16 +141,9 @@ app.whenReady().then(() => {

    // Log debug mode status
    const isDebugMode = process.env.DEBUG === 'true';
-    const isAutoClaudeDebug = process.env.AUTO_CLAUDE_DEBUG === 'true';
-    if (isDebugMode || isAutoClaudeDebug) {
+    if (isDebugMode) {
      console.warn('[main] ========================================');
-      console.warn('[main] DEBUG MODE ENABLED');
-      if (isDebugMode) {
-        console.warn('[main] - DEBUG=true (Ideation/Roadmap debug logging)');
-      }
-      if (isAutoClaudeDebug) {
-        console.warn('[main] - AUTO_CLAUDE_DEBUG=true (Core features debug logging)');
-      }
+      console.warn('[main] DEBUG MODE ENABLED (DEBUG=true)');
      console.warn('[main] ========================================');
    }

@@ -1,6 +1,7 @@
 import { spawn, ChildProcess } from 'child_process';
-import { existsSync } from 'fs';
+import { existsSync, writeFileSync, unlinkSync } from 'fs';
 import path from 'path';
+import os from 'os';
 import { EventEmitter } from 'events';
 import type {
  InsightsChatMessage,
@@ -86,12 +87,27 @@ export class InsightsExecutor extends EventEmitter {
    // Get process environment
    const processEnv = this.config.getProcessEnv();

+    // Write conversation history to temp file to avoid Windows command-line length limit
+    const historyFile = path.join(
+      os.tmpdir(),
+      `insights-history-${projectId}-${Date.now()}.json`
+    );
+
+    let historyFileCreated = false;
+    try {
+      writeFileSync(historyFile, JSON.stringify(conversationHistory), 'utf-8');
+      historyFileCreated = true;
+    } catch (err) {
+      console.error('[Insights] Failed to write history file:', err);
+      throw new Error('Failed to write conversation history to temp file');
+    }
+
    // Build command arguments
    const args = [
      runnerPath,
      '--project-dir', projectPath,
      '--message', message,
-      '--history', JSON.stringify(conversationHistory)
+      '--history-file', historyFile
    ];

    // Add model config if provided
@@ -151,6 +167,15 @@ export class InsightsExecutor extends EventEmitter {
      proc.on('close', (code) => {
        this.activeSessions.delete(projectId);

+        // Cleanup temp file
+        if (historyFileCreated && existsSync(historyFile)) {
+          try {
+            unlinkSync(historyFile);
+          } catch (cleanupErr) {
+            console.error('[Insights] Failed to cleanup history file:', cleanupErr);
+          }
+        }
+
        // Check for rate limit if process failed
        if (code !== 0) {
          this.handleRateLimit(projectId, allInsightsOutput);
@@ -184,6 +209,16 @@ export class InsightsExecutor extends EventEmitter {

      proc.on('error', (err) => {
        this.activeSessions.delete(projectId);
+
+        // Cleanup temp file
+        if (historyFileCreated && existsSync(historyFile)) {
+          try {
+            unlinkSync(historyFile);
+          } catch (cleanupErr) {
+            console.error('[Insights] Failed to cleanup history file:', cleanupErr);
+          }
+        }
+
        this.emit('error', projectId, err.message);
        reject(err);
      });
@@ -0,0 +1,18 @@
+/**
+ * Integration module for external roadmap/feedback services
+ *
+ * Currently provides architecture for future integrations with:
+ * - Canny.io (feedback management)
+ * - GitHub Issues
+ *
+ * To add a new integration:
+ * 1. Implement the IntegrationAdapter interface
+ * 2. Add status mapping constants
+ * 3. Register the adapter in this module
+ */
+
+export * from './types';
+
+// Future: Export concrete adapter implementations
+// export { CannyAdapter } from './canny-adapter';
+// export { GitHubIssuesAdapter } from './github-issues-adapter';
@@ -0,0 +1,125 @@
+/**
+ * Integration provider types for external roadmap services (Canny, GitHub Issues, etc.)
+ *
+ * This architecture allows bidirectional sync with external feedback/roadmap systems:
+ * - Import: Fetch feature requests from external services
+ * - Export: Push status updates back when features progress
+ */
+
+import type { RoadmapFeatureStatus } from '../../shared/types';
+
+/**
+ * Represents an item from an external feedback/roadmap system
+ */
+export interface FeedbackItem {
+  externalId: string;
+  title: string;
+  description: string;
+  votes: number;
+  status: string;  // Provider-specific status
+  url: string;
+  createdAt: Date;
+  updatedAt?: Date;
+  author?: string;
+  tags?: string[];
+}
+
+/**
+ * Connection status for a provider
+ */
+export interface ProviderConnection {
+  id: string;
+  name: string;
+  connected: boolean;
+  lastSync?: Date;
+  error?: string;
+}
+
+/**
+ * Configuration for a provider
+ */
+export interface ProviderConfig {
+  enabled: boolean;
+  apiKey?: string;
+  boardId?: string;
+  autoSync?: boolean;
+  syncIntervalMinutes?: number;
+}
+
+/**
+ * Abstract interface for integration adapters
+ *
+ * Implement this interface to add support for new external services.
+ * Each adapter handles mapping between internal and external status systems.
+ */
+export interface IntegrationAdapter {
+  /** Unique identifier for this provider */
+  readonly providerId: string;
+
+  /** Display name for the provider */
+  readonly providerName: string;
+
+  /**
+   * Test the connection to the external service
+   */
+  testConnection(): Promise<{ success: boolean; error?: string }>;
+
+  /**
+   * Fetch all items from the external service
+   */
+  fetchItems(): Promise<FeedbackItem[]>;
+
+  /**
+   * Update the status of an item in the external service
+   */
+  updateStatus(externalId: string, status: string): Promise<void>;
+
+  /**
+   * Map internal roadmap status to provider-specific status
+   */
+  mapStatusToProvider(internalStatus: RoadmapFeatureStatus): string;
+
+  /**
+   * Map provider-specific status to internal roadmap status
+   */
+  mapStatusFromProvider(externalStatus: string): RoadmapFeatureStatus;
+}
+
+/**
+ * Canny-specific status mapping
+ * Reference: https://developers.canny.io/api-reference
+ */
+export const CANNY_STATUS_MAP = {
+  toProvider: {
+    under_review: 'under review',
+    planned: 'planned',
+    in_progress: 'in progress',
+    done: 'complete'
+  } as Record<RoadmapFeatureStatus, string>,
+
+  fromProvider: {
+    'open': 'under_review',
+    'under review': 'under_review',
+    'planned': 'planned',
+    'in progress': 'in_progress',
+    'complete': 'done',
+    'closed': 'done'
+  } as Record<string, RoadmapFeatureStatus>
+};
+
+/**
+ * GitHub Issues status mapping
+ */
+export const GITHUB_ISSUES_STATUS_MAP = {
+  toProvider: {
+    under_review: 'open',
+    planned: 'open',
+    in_progress: 'open',
+    done: 'closed'
+  } as Record<RoadmapFeatureStatus, string>,
+
+  fromProvider: {
+    'open': 'under_review',
+    'closed': 'done'
+  } as Record<string, RoadmapFeatureStatus>
+};
@@ -69,6 +69,41 @@ export function registerEnvHandlers(
    if (config.graphitiEnabled !== undefined) {
      existingVars['GRAPHITI_ENABLED'] = config.graphitiEnabled ? 'true' : 'false';
    }
+    // Graphiti Provider Configuration
+    if (config.graphitiProviderConfig) {
+      const pc = config.graphitiProviderConfig;
+      if (pc.llmProvider) existingVars['GRAPHITI_LLM_PROVIDER'] = pc.llmProvider;
+      if (pc.embeddingProvider) existingVars['GRAPHITI_EMBEDDER_PROVIDER'] = pc.embeddingProvider;
+      // OpenAI
+      if (pc.openaiApiKey) existingVars['OPENAI_API_KEY'] = pc.openaiApiKey;
+      if (pc.openaiModel) existingVars['OPENAI_MODEL'] = pc.openaiModel;
+      if (pc.openaiEmbeddingModel) existingVars['OPENAI_EMBEDDING_MODEL'] = pc.openaiEmbeddingModel;
+      // Anthropic
+      if (pc.anthropicApiKey) existingVars['ANTHROPIC_API_KEY'] = pc.anthropicApiKey;
+      if (pc.anthropicModel) existingVars['GRAPHITI_ANTHROPIC_MODEL'] = pc.anthropicModel;
+      // Azure OpenAI
+      if (pc.azureOpenaiApiKey) existingVars['AZURE_OPENAI_API_KEY'] = pc.azureOpenaiApiKey;
+      if (pc.azureOpenaiBaseUrl) existingVars['AZURE_OPENAI_BASE_URL'] = pc.azureOpenaiBaseUrl;
+      if (pc.azureOpenaiLlmDeployment) existingVars['AZURE_OPENAI_LLM_DEPLOYMENT'] = pc.azureOpenaiLlmDeployment;
+      if (pc.azureOpenaiEmbeddingDeployment) existingVars['AZURE_OPENAI_EMBEDDING_DEPLOYMENT'] = pc.azureOpenaiEmbeddingDeployment;
+      // Voyage
+      if (pc.voyageApiKey) existingVars['VOYAGE_API_KEY'] = pc.voyageApiKey;
+      if (pc.voyageEmbeddingModel) existingVars['VOYAGE_EMBEDDING_MODEL'] = pc.voyageEmbeddingModel;
+      // Google
+      if (pc.googleApiKey) existingVars['GOOGLE_API_KEY'] = pc.googleApiKey;
+      if (pc.googleLlmModel) existingVars['GOOGLE_LLM_MODEL'] = pc.googleLlmModel;
+      if (pc.googleEmbeddingModel) existingVars['GOOGLE_EMBEDDING_MODEL'] = pc.googleEmbeddingModel;
+      // Ollama
+      if (pc.ollamaBaseUrl) existingVars['OLLAMA_BASE_URL'] = pc.ollamaBaseUrl;
+      if (pc.ollamaLlmModel) existingVars['OLLAMA_LLM_MODEL'] = pc.ollamaLlmModel;
+      if (pc.ollamaEmbeddingModel) existingVars['OLLAMA_EMBEDDING_MODEL'] = pc.ollamaEmbeddingModel;
+      if (pc.ollamaEmbeddingDim) existingVars['OLLAMA_EMBEDDING_DIM'] = String(pc.ollamaEmbeddingDim);
+      // FalkorDB
+      if (pc.falkorDbHost) existingVars['GRAPHITI_FALKORDB_HOST'] = pc.falkorDbHost;
+      if (pc.falkorDbPort) existingVars['GRAPHITI_FALKORDB_PORT'] = String(pc.falkorDbPort);
+      if (pc.falkorDbPassword) existingVars['GRAPHITI_FALKORDB_PASSWORD'] = pc.falkorDbPassword;
+    }
+    // Legacy fields (still supported)
    if (config.openaiApiKey !== undefined) {
      existingVars['OPENAI_API_KEY'] = config.openaiApiKey;
    }
@@ -127,9 +162,45 @@ ${existingVars['ENABLE_FANCY_UI'] !== undefined ? `ENABLE_FANCY_UI=${existingVar

 # =============================================================================
 # GRAPHITI MEMORY INTEGRATION (OPTIONAL)
+# Multi-provider support: OpenAI, Anthropic, Google AI, Azure OpenAI, Ollama, Voyage
 # =============================================================================
 ${existingVars['GRAPHITI_ENABLED'] ? `GRAPHITI_ENABLED=${existingVars['GRAPHITI_ENABLED']}` : '# GRAPHITI_ENABLED=false'}
+
+# Provider Selection
+${existingVars['GRAPHITI_LLM_PROVIDER'] ? `GRAPHITI_LLM_PROVIDER=${existingVars['GRAPHITI_LLM_PROVIDER']}` : '# GRAPHITI_LLM_PROVIDER=openai'}
+${existingVars['GRAPHITI_EMBEDDER_PROVIDER'] ? `GRAPHITI_EMBEDDER_PROVIDER=${existingVars['GRAPHITI_EMBEDDER_PROVIDER']}` : '# GRAPHITI_EMBEDDER_PROVIDER=openai'}
+
+# OpenAI Settings
 ${existingVars['OPENAI_API_KEY'] ? `OPENAI_API_KEY=${existingVars['OPENAI_API_KEY']}` : '# OPENAI_API_KEY='}
+${existingVars['OPENAI_MODEL'] ? `OPENAI_MODEL=${existingVars['OPENAI_MODEL']}` : '# OPENAI_MODEL=gpt-4o-mini'}
+${existingVars['OPENAI_EMBEDDING_MODEL'] ? `OPENAI_EMBEDDING_MODEL=${existingVars['OPENAI_EMBEDDING_MODEL']}` : '# OPENAI_EMBEDDING_MODEL=text-embedding-3-small'}
+
+# Anthropic Settings (LLM only - use with Voyage or OpenAI for embeddings)
+${existingVars['ANTHROPIC_API_KEY'] ? `ANTHROPIC_API_KEY=${existingVars['ANTHROPIC_API_KEY']}` : '# ANTHROPIC_API_KEY='}
+${existingVars['GRAPHITI_ANTHROPIC_MODEL'] ? `GRAPHITI_ANTHROPIC_MODEL=${existingVars['GRAPHITI_ANTHROPIC_MODEL']}` : '# GRAPHITI_ANTHROPIC_MODEL=claude-sonnet-4-5-latest'}
+
+# Azure OpenAI Settings
+${existingVars['AZURE_OPENAI_API_KEY'] ? `AZURE_OPENAI_API_KEY=${existingVars['AZURE_OPENAI_API_KEY']}` : '# AZURE_OPENAI_API_KEY='}
+${existingVars['AZURE_OPENAI_BASE_URL'] ? `AZURE_OPENAI_BASE_URL=${existingVars['AZURE_OPENAI_BASE_URL']}` : '# AZURE_OPENAI_BASE_URL='}
+${existingVars['AZURE_OPENAI_LLM_DEPLOYMENT'] ? `AZURE_OPENAI_LLM_DEPLOYMENT=${existingVars['AZURE_OPENAI_LLM_DEPLOYMENT']}` : '# AZURE_OPENAI_LLM_DEPLOYMENT='}
+${existingVars['AZURE_OPENAI_EMBEDDING_DEPLOYMENT'] ? `AZURE_OPENAI_EMBEDDING_DEPLOYMENT=${existingVars['AZURE_OPENAI_EMBEDDING_DEPLOYMENT']}` : '# AZURE_OPENAI_EMBEDDING_DEPLOYMENT='}
+
+# Voyage AI Settings (Embeddings only - great with Anthropic)
+${existingVars['VOYAGE_API_KEY'] ? `VOYAGE_API_KEY=${existingVars['VOYAGE_API_KEY']}` : '# VOYAGE_API_KEY='}
+${existingVars['VOYAGE_EMBEDDING_MODEL'] ? `VOYAGE_EMBEDDING_MODEL=${existingVars['VOYAGE_EMBEDDING_MODEL']}` : '# VOYAGE_EMBEDDING_MODEL=voyage-3'}
+
+# Google AI Settings (LLM and Embeddings - Gemini)
+${existingVars['GOOGLE_API_KEY'] ? `GOOGLE_API_KEY=${existingVars['GOOGLE_API_KEY']}` : '# GOOGLE_API_KEY='}
+${existingVars['GOOGLE_LLM_MODEL'] ? `GOOGLE_LLM_MODEL=${existingVars['GOOGLE_LLM_MODEL']}` : '# GOOGLE_LLM_MODEL=gemini-2.0-flash'}
+${existingVars['GOOGLE_EMBEDDING_MODEL'] ? `GOOGLE_EMBEDDING_MODEL=${existingVars['GOOGLE_EMBEDDING_MODEL']}` : '# GOOGLE_EMBEDDING_MODEL=text-embedding-004'}
+
+# Ollama Settings (Local - free)
+${existingVars['OLLAMA_BASE_URL'] ? `OLLAMA_BASE_URL=${existingVars['OLLAMA_BASE_URL']}` : '# OLLAMA_BASE_URL=http://localhost:11434'}
+${existingVars['OLLAMA_LLM_MODEL'] ? `OLLAMA_LLM_MODEL=${existingVars['OLLAMA_LLM_MODEL']}` : '# OLLAMA_LLM_MODEL='}
+${existingVars['OLLAMA_EMBEDDING_MODEL'] ? `OLLAMA_EMBEDDING_MODEL=${existingVars['OLLAMA_EMBEDDING_MODEL']}` : '# OLLAMA_EMBEDDING_MODEL='}
+${existingVars['OLLAMA_EMBEDDING_DIM'] ? `OLLAMA_EMBEDDING_DIM=${existingVars['OLLAMA_EMBEDDING_DIM']}` : '# OLLAMA_EMBEDDING_DIM=768'}
+
+# FalkorDB Connection
 ${existingVars['GRAPHITI_FALKORDB_HOST'] ? `GRAPHITI_FALKORDB_HOST=${existingVars['GRAPHITI_FALKORDB_HOST']}` : '# GRAPHITI_FALKORDB_HOST=localhost'}
 ${existingVars['GRAPHITI_FALKORDB_PORT'] ? `GRAPHITI_FALKORDB_PORT=${existingVars['GRAPHITI_FALKORDB_PORT']}` : '# GRAPHITI_FALKORDB_PORT=6380'}
 ${existingVars['GRAPHITI_FALKORDB_PASSWORD'] ? `GRAPHITI_FALKORDB_PASSWORD=${existingVars['GRAPHITI_FALKORDB_PASSWORD']}` : '# GRAPHITI_FALKORDB_PASSWORD='}
@@ -262,6 +333,45 @@ ${existingVars['GRAPHITI_DATABASE'] ? `GRAPHITI_DATABASE=${existingVars['GRAPHIT
        config.enableFancyUi = false;
      }

+      // Populate graphitiProviderConfig from .env file
+      const llmProvider = vars['GRAPHITI_LLM_PROVIDER'];
+      const embeddingProvider = vars['GRAPHITI_EMBEDDER_PROVIDER'];
+      if (llmProvider || embeddingProvider || vars['ANTHROPIC_API_KEY'] || vars['AZURE_OPENAI_API_KEY'] ||
+          vars['VOYAGE_API_KEY'] || vars['GOOGLE_API_KEY'] || vars['OLLAMA_BASE_URL']) {
+        config.graphitiProviderConfig = {
+          llmProvider: (llmProvider as 'openai' | 'anthropic' | 'azure_openai' | 'ollama' | 'google' | 'groq') || 'openai',
+          embeddingProvider: (embeddingProvider as 'openai' | 'voyage' | 'azure_openai' | 'ollama' | 'google' | 'huggingface') || 'openai',
+          // OpenAI
+          openaiApiKey: vars['OPENAI_API_KEY'],
+          openaiModel: vars['OPENAI_MODEL'],
+          openaiEmbeddingModel: vars['OPENAI_EMBEDDING_MODEL'],
+          // Anthropic
+          anthropicApiKey: vars['ANTHROPIC_API_KEY'],
+          anthropicModel: vars['GRAPHITI_ANTHROPIC_MODEL'],
+          // Azure OpenAI
+          azureOpenaiApiKey: vars['AZURE_OPENAI_API_KEY'],
+          azureOpenaiBaseUrl: vars['AZURE_OPENAI_BASE_URL'],
+          azureOpenaiLlmDeployment: vars['AZURE_OPENAI_LLM_DEPLOYMENT'],
+          azureOpenaiEmbeddingDeployment: vars['AZURE_OPENAI_EMBEDDING_DEPLOYMENT'],
+          // Voyage
+          voyageApiKey: vars['VOYAGE_API_KEY'],
+          voyageEmbeddingModel: vars['VOYAGE_EMBEDDING_MODEL'],
+          // Google
+          googleApiKey: vars['GOOGLE_API_KEY'],
+          googleLlmModel: vars['GOOGLE_LLM_MODEL'],
+          googleEmbeddingModel: vars['GOOGLE_EMBEDDING_MODEL'],
+          // Ollama
+          ollamaBaseUrl: vars['OLLAMA_BASE_URL'],
+          ollamaLlmModel: vars['OLLAMA_LLM_MODEL'],
+          ollamaEmbeddingModel: vars['OLLAMA_EMBEDDING_MODEL'],
+          ollamaEmbeddingDim: vars['OLLAMA_EMBEDDING_DIM'] ? parseInt(vars['OLLAMA_EMBEDDING_DIM'], 10) : undefined,
+          // FalkorDB
+          falkorDbHost: vars['GRAPHITI_FALKORDB_HOST'],
+          falkorDbPort: vars['GRAPHITI_FALKORDB_PORT'] ? parseInt(vars['GRAPHITI_FALKORDB_PORT'], 10) : undefined,
+          falkorDbPassword: vars['GRAPHITI_FALKORDB_PASSWORD'],
+        };
+      }
+
      return { success: true, data: config };
    }
  );
@@ -0,0 +1,548 @@
+/**
+ * Unit tests for GitHub OAuth handlers
+ * Tests device code parsing, shell.openExternal handling, and error recovery
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { EventEmitter } from 'events';
+
+// Mock child_process before importing
+const mockSpawn = vi.fn();
+const mockExecSync = vi.fn();
+const mockExecFileSync = vi.fn();
+
+vi.mock('child_process', () => ({
+  spawn: (...args: unknown[]) => mockSpawn(...args),
+  execSync: (...args: unknown[]) => mockExecSync(...args),
+  execFileSync: (...args: unknown[]) => mockExecFileSync(...args)
+}));
+
+// Mock shell.openExternal
+const mockOpenExternal = vi.fn();
+
+vi.mock('electron', () => {
+  const mockIpcMain = new (class extends EventEmitter {
+    private handlers: Map<string, Function> = new Map();
+
+    handle(channel: string, handler: Function): void {
+      this.handlers.set(channel, handler);
+    }
+
+    removeHandler(channel: string): void {
+      this.handlers.delete(channel);
+    }
+
+    async invokeHandler(channel: string, event: unknown, ...args: unknown[]): Promise<unknown> {
+      const handler = this.handlers.get(channel);
+      if (handler) {
+        return handler(event, ...args);
+      }
+      throw new Error(`No handler for channel: ${channel}`);
+    }
+
+    getHandler(channel: string): Function | undefined {
+      return this.handlers.get(channel);
+    }
+  })();
+
+  return {
+    ipcMain: mockIpcMain,
+    shell: {
+      openExternal: (...args: unknown[]) => mockOpenExternal(...args)
+    }
+  };
+});
+
+// Mock @electron-toolkit/utils
+vi.mock('@electron-toolkit/utils', () => ({
+  is: {
+    dev: true,
+    windows: process.platform === 'win32',
+    macos: process.platform === 'darwin',
+    linux: process.platform === 'linux'
+  }
+}));
+
+// Create mock process for spawn
+function createMockProcess(): EventEmitter & {
+  stdout: EventEmitter | null;
+  stderr: EventEmitter | null;
+  stdin: { write: ReturnType<typeof vi.fn>; end: ReturnType<typeof vi.fn> } | null;
+} {
+  const proc = new EventEmitter() as EventEmitter & {
+    stdout: EventEmitter | null;
+    stderr: EventEmitter | null;
+    stdin: { write: ReturnType<typeof vi.fn>; end: ReturnType<typeof vi.fn> } | null;
+  };
+  proc.stdout = new EventEmitter();
+  proc.stderr = new EventEmitter();
+  proc.stdin = { write: vi.fn(), end: vi.fn() };
+  return proc;
+}
+
+describe('GitHub OAuth Handlers', () => {
+  let ipcMain: EventEmitter & {
+    handlers: Map<string, Function>;
+    invokeHandler: (channel: string, event: unknown, ...args: unknown[]) => Promise<unknown>;
+    getHandler: (channel: string) => Function | undefined;
+  };
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    vi.resetModules();
+
+    // Get mocked ipcMain
+    const electron = await import('electron');
+    ipcMain = electron.ipcMain as unknown as typeof ipcMain;
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Device Code Parsing', () => {
+    it('should parse device code from standard gh CLI output format', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+      mockOpenExternal.mockResolvedValue(undefined);
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      // Start the handler
+      const resultPromise = ipcMain.invokeHandler('github:startAuth', {});
+
+      // Simulate gh CLI output with device code
+      mockProcess.stderr?.emit('data', '! First copy your one-time code: ABCD-1234\n');
+      mockProcess.stderr?.emit('data', '- Press Enter to open github.com in your browser...\n');
+
+      // Complete the process
+      mockProcess.emit('close', 0);
+
+      const result = await resultPromise;
+
+      expect(result).toHaveProperty('success', true);
+      expect(result).toHaveProperty('data');
+      const data = (result as { data: { deviceCode: string } }).data;
+      expect(data.deviceCode).toBe('ABCD-1234');
+    });
+
+    it('should parse device code from alternate output format (lowercase "code")', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+      mockOpenExternal.mockResolvedValue(undefined);
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      const resultPromise = ipcMain.invokeHandler('github:startAuth', {});
+
+      // Alternate format: "code: XXXX-XXXX" without "one-time"
+      mockProcess.stderr?.emit('data', 'Enter the code: EFGH-5678\n');
+      mockProcess.emit('close', 0);
+
+      const result = await resultPromise;
+
+      expect(result).toHaveProperty('success', true);
+      const data = (result as { data: { deviceCode: string } }).data;
+      expect(data.deviceCode).toBe('EFGH-5678');
+    });
+
+    it('should parse device code from stdout (not just stderr)', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+      mockOpenExternal.mockResolvedValue(undefined);
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      const resultPromise = ipcMain.invokeHandler('github:startAuth', {});
+
+      // Device code in stdout instead of stderr
+      mockProcess.stdout?.emit('data', '! First copy your one-time code: IJKL-9012\n');
+      mockProcess.emit('close', 0);
+
+      const result = await resultPromise;
+
+      expect(result).toHaveProperty('success', true);
+      const data = (result as { data: { deviceCode: string } }).data;
+      expect(data.deviceCode).toBe('IJKL-9012');
+    });
+
+    it('should handle output without device code gracefully', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      const resultPromise = ipcMain.invokeHandler('github:startAuth', {});
+
+      // Output without device code
+      mockProcess.stderr?.emit('data', 'Some other message\n');
+      mockProcess.emit('close', 0);
+
+      const result = await resultPromise;
+
+      expect(result).toHaveProperty('success', true);
+      const data = (result as { data: { deviceCode?: string } }).data;
+      expect(data.deviceCode).toBeUndefined();
+    });
+
+    it('should extract URL from output containing https://github.com/login/device', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+      mockOpenExternal.mockResolvedValue(undefined);
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      const resultPromise = ipcMain.invokeHandler('github:startAuth', {});
+
+      mockProcess.stderr?.emit('data', '! First copy your one-time code: MNOP-3456\n');
+      mockProcess.stderr?.emit('data', 'Then visit https://github.com/login/device to authenticate\n');
+      mockProcess.emit('close', 0);
+
+      const result = await resultPromise;
+
+      expect(result).toHaveProperty('success', true);
+      const data = (result as { data: { authUrl: string } }).data;
+      expect(data.authUrl).toBe('https://github.com/login/device');
+    });
+  });
+
+  describe('shell.openExternal Handling', () => {
+    it('should call shell.openExternal with extracted URL when device code found', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+      mockOpenExternal.mockResolvedValue(undefined);
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      const resultPromise = ipcMain.invokeHandler('github:startAuth', {});
+
+      mockProcess.stderr?.emit('data', '! First copy your one-time code: QRST-7890\n');
+
+      // Wait for next tick to allow async browser opening
+      await new Promise(resolve => setTimeout(resolve, 10));
+
+      mockProcess.emit('close', 0);
+      await resultPromise;
+
+      expect(mockOpenExternal).toHaveBeenCalledWith('https://github.com/login/device');
+    });
+
+    it('should set browserOpened to true when shell.openExternal succeeds', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+      mockOpenExternal.mockResolvedValue(undefined);
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      const resultPromise = ipcMain.invokeHandler('github:startAuth', {});
+
+      mockProcess.stderr?.emit('data', '! First copy your one-time code: UVWX-1234\n');
+
+      // Wait for async browser opening
+      await new Promise(resolve => setTimeout(resolve, 10));
+
+      mockProcess.emit('close', 0);
+      const result = await resultPromise;
+
+      expect(result).toHaveProperty('success', true);
+      const data = (result as { data: { browserOpened: boolean } }).data;
+      expect(data.browserOpened).toBe(true);
+    });
+
+    it('should set browserOpened to false when shell.openExternal fails', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+      mockOpenExternal.mockRejectedValue(new Error('Failed to open browser'));
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      const resultPromise = ipcMain.invokeHandler('github:startAuth', {});
+
+      mockProcess.stderr?.emit('data', '! First copy your one-time code: YZAB-5678\n');
+
+      // Wait for async browser opening to fail
+      await new Promise(resolve => setTimeout(resolve, 10));
+
+      mockProcess.emit('close', 0);
+      const result = await resultPromise;
+
+      expect(result).toHaveProperty('success', true);
+      const data = (result as { data: { browserOpened: boolean } }).data;
+      expect(data.browserOpened).toBe(false);
+    });
+
+    it('should provide fallbackUrl when browser fails to open', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+      mockOpenExternal.mockRejectedValue(new Error('Failed to open browser'));
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      const resultPromise = ipcMain.invokeHandler('github:startAuth', {});
+
+      mockProcess.stderr?.emit('data', '! First copy your one-time code: CDEF-9012\n');
+
+      // Wait for async browser opening to fail
+      await new Promise(resolve => setTimeout(resolve, 10));
+
+      mockProcess.emit('close', 0);
+      const result = await resultPromise;
+
+      expect(result).toHaveProperty('success', true);
+      const data = (result as { data: { fallbackUrl?: string } }).data;
+      expect(data.fallbackUrl).toBe('https://github.com/login/device');
+    });
+
+    it('should not provide fallbackUrl when browser opens successfully', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+      mockOpenExternal.mockResolvedValue(undefined);
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      const resultPromise = ipcMain.invokeHandler('github:startAuth', {});
+
+      mockProcess.stderr?.emit('data', '! First copy your one-time code: GHIJ-3456\n');
+
+      // Wait for async browser opening
+      await new Promise(resolve => setTimeout(resolve, 10));
+
+      mockProcess.emit('close', 0);
+      const result = await resultPromise;
+
+      expect(result).toHaveProperty('success', true);
+      const data = (result as { data: { fallbackUrl?: string } }).data;
+      expect(data.fallbackUrl).toBeUndefined();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle gh CLI process error', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      const resultPromise = ipcMain.invokeHandler('github:startAuth', {});
+
+      // Emit error event
+      mockProcess.emit('error', new Error('spawn gh ENOENT'));
+
+      const result = await resultPromise;
+
+      expect(result).toHaveProperty('success', false);
+      expect(result).toHaveProperty('error', 'spawn gh ENOENT');
+      const data = (result as { data: { fallbackUrl: string } }).data;
+      expect(data.fallbackUrl).toBe('https://github.com/login/device');
+    });
+
+    it('should handle non-zero exit code', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      const resultPromise = ipcMain.invokeHandler('github:startAuth', {});
+
+      mockProcess.stderr?.emit('data', 'error: some authentication error\n');
+      mockProcess.emit('close', 1);
+
+      const result = await resultPromise;
+
+      expect(result).toHaveProperty('success', false);
+      const data = (result as { data: { fallbackUrl: string } }).data;
+      expect(data.fallbackUrl).toBe('https://github.com/login/device');
+    });
+
+    it('should include device code in error result if it was extracted before failure', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+      mockOpenExternal.mockResolvedValue(undefined);
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      const resultPromise = ipcMain.invokeHandler('github:startAuth', {});
+
+      // Device code output followed by failure
+      mockProcess.stderr?.emit('data', '! First copy your one-time code: KLMN-7890\n');
+
+      // Wait for async browser opening
+      await new Promise(resolve => setTimeout(resolve, 10));
+
+      mockProcess.stderr?.emit('data', 'error: authentication failed\n');
+      mockProcess.emit('close', 1);
+
+      const result = await resultPromise;
+
+      expect(result).toHaveProperty('success', false);
+      const data = (result as { data: { deviceCode: string; fallbackUrl: string } }).data;
+      expect(data.deviceCode).toBe('KLMN-7890');
+      expect(data.fallbackUrl).toBe('https://github.com/login/device');
+    });
+
+    it('should provide user-friendly error message on process spawn failure', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      const resultPromise = ipcMain.invokeHandler('github:startAuth', {});
+
+      mockProcess.emit('error', new Error('spawn gh ENOENT'));
+
+      const result = await resultPromise;
+
+      expect(result).toHaveProperty('success', false);
+      const data = (result as { data: { message: string } }).data;
+      expect(data.message).toContain('Failed to start GitHub CLI');
+    });
+  });
+
+  describe('gh CLI Check Handler', () => {
+    it('should return installed: true when gh CLI is found', async () => {
+      mockExecSync.mockImplementation((cmd: string) => {
+        if (cmd.includes('which gh') || cmd.includes('where gh')) {
+          return '/usr/local/bin/gh\n';
+        }
+        if (cmd === 'gh --version') {
+          return 'gh version 2.65.0 (2024-01-15)\n';
+        }
+        return '';
+      });
+
+      const { registerCheckGhCli } = await import('../oauth-handlers');
+      registerCheckGhCli();
+
+      const result = await ipcMain.invokeHandler('github:checkCli', {});
+
+      expect(result).toHaveProperty('success', true);
+      const data = (result as { data: { installed: boolean; version: string } }).data;
+      expect(data.installed).toBe(true);
+      expect(data.version).toContain('gh version');
+    });
+
+    it('should return installed: false when gh CLI is not found', async () => {
+      mockExecSync.mockImplementation(() => {
+        throw new Error('Command not found');
+      });
+
+      const { registerCheckGhCli } = await import('../oauth-handlers');
+      registerCheckGhCli();
+
+      const result = await ipcMain.invokeHandler('github:checkCli', {});
+
+      expect(result).toHaveProperty('success', true);
+      const data = (result as { data: { installed: boolean } }).data;
+      expect(data.installed).toBe(false);
+    });
+  });
+
+  describe('gh Auth Check Handler', () => {
+    it('should return authenticated: true with username when logged in', async () => {
+      mockExecSync.mockImplementation((cmd: string) => {
+        if (cmd === 'gh auth status') {
+          return 'Logged in to github.com as testuser\n';
+        }
+        if (cmd === 'gh api user --jq .login') {
+          return 'testuser\n';
+        }
+        return '';
+      });
+
+      const { registerCheckGhAuth } = await import('../oauth-handlers');
+      registerCheckGhAuth();
+
+      const result = await ipcMain.invokeHandler('github:checkAuth', {});
+
+      expect(result).toHaveProperty('success', true);
+      const data = (result as { data: { authenticated: boolean; username: string } }).data;
+      expect(data.authenticated).toBe(true);
+      expect(data.username).toBe('testuser');
+    });
+
+    it('should return authenticated: false when not logged in', async () => {
+      mockExecSync.mockImplementation(() => {
+        throw new Error('You are not logged into any GitHub hosts');
+      });
+
+      const { registerCheckGhAuth } = await import('../oauth-handlers');
+      registerCheckGhAuth();
+
+      const result = await ipcMain.invokeHandler('github:checkAuth', {});
+
+      expect(result).toHaveProperty('success', true);
+      const data = (result as { data: { authenticated: boolean } }).data;
+      expect(data.authenticated).toBe(false);
+    });
+  });
+
+  describe('Spawn Arguments', () => {
+    it('should spawn gh with correct auth login arguments', async () => {
+      const mockProcess = createMockProcess();
+      mockSpawn.mockReturnValue(mockProcess);
+
+      const { registerStartGhAuth } = await import('../oauth-handlers');
+      registerStartGhAuth();
+
+      ipcMain.invokeHandler('github:startAuth', {});
+
+      expect(mockSpawn).toHaveBeenCalledWith(
+        'gh',
+        ['auth', 'login', '--web', '--scopes', 'repo'],
+        expect.objectContaining({
+          stdio: ['pipe', 'pipe', 'pipe']
+        })
+      );
+    });
+  });
+
+  describe('Repository Validation', () => {
+    it('should reject invalid repository format', async () => {
+      const { registerGetGitHubBranches } = await import('../oauth-handlers');
+      registerGetGitHubBranches();
+
+      // Test with injection attempt
+      const result = await ipcMain.invokeHandler(
+        'github:getBranches',
+        {},
+        'owner/repo; rm -rf /',
+        'token'
+      );
+
+      expect(result).toHaveProperty('success', false);
+      expect(result).toHaveProperty('error', 'Invalid repository format. Expected: owner/repo');
+    });
+
+    it('should accept valid repository format', async () => {
+      mockExecFileSync.mockReturnValue('main\nfeature-branch\n');
+
+      const { registerGetGitHubBranches } = await import('../oauth-handlers');
+      registerGetGitHubBranches();
+
+      const result = await ipcMain.invokeHandler(
+        'github:getBranches',
+        {},
+        'valid-owner/valid-repo',
+        'token'
+      );
+
+      expect(result).toHaveProperty('success', true);
+      const data = (result as { data: string[] }).data;
+      expect(data).toContain('main');
+      expect(data).toContain('feature-branch');
+    });
+  });
+});
@@ -3,7 +3,7 @@
 * Provides a simpler OAuth flow than manual PAT creation
 */

-import { ipcMain } from 'electron';
+import { ipcMain, shell } from 'electron';
 import { execSync, execFileSync, spawn } from 'child_process';
 import { IPC_CHANNELS } from '../../../shared/constants';
 import type { IPCResult } from '../../../shared/types';
@@ -33,6 +33,71 @@ function isValidGitHubRepo(repo: string): boolean {
  return GITHUB_REPO_PATTERN.test(repo);
 }

+// Regex patterns for parsing device code from gh CLI output
+// Expected format: "! First copy your one-time code: XXXX-XXXX"
+// Pattern updated to handle different gh CLI versions - supports:
+// - "one-time code", "code", or "verification code" prefixes
+// - Hyphen or space separator in the code (XXXX-XXXX or XXXX XXXX)
+// Note: Separator is REQUIRED to avoid matching 8-char strings without separator
+const DEVICE_CODE_PATTERN = /(?:one-time code|verification code|code):\s*([A-Z0-9]{4}[-\s][A-Z0-9]{4})/i;
+
+// GitHub device flow URL pattern
+const DEVICE_URL_PATTERN = /https:\/\/github\.com\/login\/device/i;
+
+// Default GitHub device flow URL
+const GITHUB_DEVICE_URL = 'https://github.com/login/device';
+
+/**
+ * Parse device code from gh CLI stdout output
+ * Returns the device code (format: XXXX-XXXX) if found, null otherwise
+ * Normalizes space separator to hyphen (GitHub always expects XXXX-XXXX)
+ */
+function parseDeviceCode(output: string): string | null {
+  const match = output.match(DEVICE_CODE_PATTERN);
+  if (match && match[1]) {
+    // Normalize: replace space with hyphen (GitHub expects XXXX-XXXX format)
+    const normalizedCode = match[1].replace(' ', '-');
+    debugLog('Device code extracted successfully (code redacted for security)');
+    return normalizedCode;
+  }
+  return null;
+}
+
+/**
+ * Parse device URL from gh CLI output
+ * Returns the URL if found, or the default GitHub device URL
+ */
+function parseDeviceUrl(output: string): string {
+  const match = output.match(DEVICE_URL_PATTERN);
+  if (match) {
+    debugLog('Found device URL in output:', match[0]);
+    return match[0];
+  }
+  // Default to standard GitHub device flow URL
+  return GITHUB_DEVICE_URL;
+}
+
+/**
+ * Result of parsing device flow output from gh CLI
+ */
+interface DeviceFlowInfo {
+  deviceCode: string | null;
+  authUrl: string;
+}
+
+/**
+ * Parse both device code and URL from combined gh CLI output
+ * Searches through both stdout and stderr as gh may output to either
+ */
+function parseDeviceFlowOutput(stdout: string, stderr: string): DeviceFlowInfo {
+  const combinedOutput = `${stdout}\n${stderr}`;
+
+  return {
+    deviceCode: parseDeviceCode(combinedOutput),
+    authUrl: parseDeviceUrl(combinedOutput)
+  };
+}
+
 /**
 * Check if gh CLI is installed
 */
@@ -114,14 +179,31 @@ export function registerCheckGhAuth(): void {
  );
 }

+/**
+ * Result type for GitHub auth start, including device flow information
+ */
+interface GitHubAuthStartResult {
+  success: boolean;
+  message?: string;
+  deviceCode?: string;
+  authUrl?: string;
+  browserOpened?: boolean;
+  /**
+   * Fallback URL provided when browser launch fails.
+   * The frontend should display this URL so users can manually navigate to complete auth.
+   */
+  fallbackUrl?: string;
+}
+
 /**
 * Start GitHub OAuth flow using gh CLI
- * This will open the browser for device flow authentication
+ * This will extract the device code from gh CLI output and open the browser
+ * using Electron's shell.openExternal (bypasses macOS child process restrictions)
 */
 export function registerStartGhAuth(): void {
  ipcMain.handle(
    IPC_CHANNELS.GITHUB_START_AUTH,
-    async (): Promise<IPCResult<{ success: boolean; message?: string }>> => {
+    async (): Promise<IPCResult<GitHubAuthStartResult>> => {
      debugLog('startGitHubAuth handler called');
      return new Promise((resolve) => {
        try {
@@ -135,17 +217,64 @@ export function registerStartGhAuth(): void {

          let output = '';
          let errorOutput = '';
+          let deviceCodeExtracted = false;
+          let extractedDeviceCode: string | null = null;
+          let extractedAuthUrl: string = GITHUB_DEVICE_URL;
+          let browserOpenedSuccessfully = false;
+          let extractionInProgress = false;
+
+          // Function to attempt device code extraction and browser opening
+          // Uses mutex pattern to prevent race conditions from concurrent data handlers
+          const tryExtractAndOpenBrowser = async () => {
+            if (deviceCodeExtracted || extractionInProgress) return;
+            extractionInProgress = true;
+
+            const deviceFlowInfo = parseDeviceFlowOutput(output, errorOutput);
+
+            if (deviceFlowInfo.deviceCode) {
+              deviceCodeExtracted = true;
+              extractedDeviceCode = deviceFlowInfo.deviceCode;
+              extractedAuthUrl = deviceFlowInfo.authUrl;
+
+              debugLog('Device code extracted successfully (code redacted for security)');
+              debugLog('Auth URL:', extractedAuthUrl);
+
+              // Open browser using Electron's shell.openExternal
+              // This bypasses macOS child process restrictions that block gh CLI's browser launch
+              try {
+                await shell.openExternal(extractedAuthUrl);
+                browserOpenedSuccessfully = true;
+                debugLog('Browser opened successfully via shell.openExternal');
+              } catch (browserError) {
+                debugLog('Failed to open browser:', browserError instanceof Error ? browserError.message : browserError);
+                browserOpenedSuccessfully = false;
+                // Don't fail here - we'll return the device code so user can manually navigate
+              }
+
+              // Extraction complete - mutex flag stays true to prevent re-extraction
+              // The deviceCodeExtracted flag will prevent future attempts
+              extractionInProgress = false;
+            } else {
+              // No device code found yet, allow next data chunk to try again
+              extractionInProgress = false;
+            }
+          };

          ghProcess.stdout?.on('data', (data) => {
            const chunk = data.toString();
            output += chunk;
            debugLog('gh stdout:', chunk);
+            // Try to extract device code as data comes in
+            // Use void to explicitly ignore promise
+            void tryExtractAndOpenBrowser();
          });

          ghProcess.stderr?.on('data', (data) => {
            const chunk = data.toString();
            errorOutput += chunk;
            debugLog('gh stderr:', chunk);
+            // gh often outputs to stderr, so check there too
+            void tryExtractAndOpenBrowser();
          });

          ghProcess.on('close', (code) => {
@@ -154,17 +283,39 @@ export function registerStartGhAuth(): void {
            debugLog('Full stderr:', errorOutput);

            if (code === 0) {
+              // Success case - include fallbackUrl if browser failed to open
+              // so the user can manually navigate if needed
              resolve({
                success: true,
                data: {
                  success: true,
-                  message: 'Successfully authenticated with GitHub'
+                  message: browserOpenedSuccessfully
+                    ? 'Successfully authenticated with GitHub'
+                    : 'Authentication successful. Browser could not be opened automatically.',
+                  deviceCode: extractedDeviceCode || undefined,
+                  authUrl: extractedAuthUrl,
+                  browserOpened: browserOpenedSuccessfully,
+                  // Provide fallback URL when browser failed to open
+                  fallbackUrl: !browserOpenedSuccessfully ? extractedAuthUrl : undefined
                }
              });
            } else {
+              // Even if auth failed, return device code info if we extracted it
+              // This allows user to retry manually with the fallback URL
+              const fallbackUrlForManualAuth = extractedDeviceCode ? extractedAuthUrl : GITHUB_DEVICE_URL;
+
              resolve({
                success: false,
-                error: errorOutput || `Authentication failed with exit code ${code}`
+                error: errorOutput || `Authentication failed with exit code ${code}`,
+                data: {
+                  success: false,
+                  deviceCode: extractedDeviceCode || undefined,
+                  authUrl: extractedAuthUrl,
+                  browserOpened: browserOpenedSuccessfully,
+                  // Always provide fallback URL on failure for manual recovery
+                  fallbackUrl: fallbackUrlForManualAuth,
+                  message: 'Authentication failed. Please visit the URL manually to complete authentication.'
+                }
              });
            }
          });
@@ -173,14 +324,28 @@ export function registerStartGhAuth(): void {
            debugLog('gh process error:', error.message);
            resolve({
              success: false,
-              error: error.message
+              error: error.message,
+              data: {
+                success: false,
+                browserOpened: false,
+                // Provide fallback URL so user can attempt manual auth
+                fallbackUrl: GITHUB_DEVICE_URL,
+                message: 'Failed to start GitHub CLI. Please visit the URL manually to authenticate.'
+              }
            });
          });
        } catch (error) {
          debugLog('Exception in startGitHubAuth:', error instanceof Error ? error.message : error);
          resolve({
            success: false,
-            error: error instanceof Error ? error.message : 'Unknown error'
+            error: error instanceof Error ? error.message : 'Unknown error',
+            data: {
+              success: false,
+              browserOpened: false,
+              // Provide fallback URL for manual authentication recovery
+              fallbackUrl: GITHUB_DEVICE_URL,
+              message: 'An unexpected error occurred. Please visit the URL manually to authenticate.'
+            }
          });
        }
      });
@@ -3,11 +3,45 @@
 */

 import type { IpcMainEvent, IpcMainInvokeEvent, BrowserWindow } from 'electron';
-import { IPC_CHANNELS } from '../../../shared/constants';
-import type { IPCResult, IdeationConfig, IdeationGenerationStatus } from '../../../shared/types';
+import { app } from 'electron';
+import { existsSync, readFileSync } from 'fs';
+import path from 'path';
+import { IPC_CHANNELS, DEFAULT_APP_SETTINGS, DEFAULT_FEATURE_MODELS, DEFAULT_FEATURE_THINKING } from '../../../shared/constants';
+import type { IPCResult, IdeationConfig, IdeationGenerationStatus, AppSettings } from '../../../shared/types';
 import { projectStore } from '../../project-store';
 import type { AgentManager } from '../../agent';
-import { debugLog } from '../../../shared/utils/debug-logger';
+import { debugLog, debugError } from '../../../shared/utils/debug-logger';
+
+/**
+ * Read ideation feature settings from the settings file
+ */
+function getIdeationFeatureSettings(): { model?: string; thinkingLevel?: string } {
+  const settingsPath = path.join(app.getPath('userData'), 'settings.json');
+
+  try {
+    if (existsSync(settingsPath)) {
+      const content = readFileSync(settingsPath, 'utf-8');
+      const settings: AppSettings = { ...DEFAULT_APP_SETTINGS, ...JSON.parse(content) };
+
+      // Get ideation-specific settings
+      const featureModels = settings.featureModels || DEFAULT_FEATURE_MODELS;
+      const featureThinking = settings.featureThinking || DEFAULT_FEATURE_THINKING;
+
+      return {
+        model: featureModels.ideation,
+        thinkingLevel: featureThinking.ideation
+      };
+    }
+  } catch (error) {
+    debugError('[Ideation Handler] Failed to read feature settings:', error);
+  }
+
+  // Return defaults if settings file doesn't exist or fails to parse
+  return {
+    model: DEFAULT_FEATURE_MODELS.ideation,
+    thinkingLevel: DEFAULT_FEATURE_THINKING.ideation
+  };
+}

 /**
 * Start ideation generation for a project
@@ -19,10 +53,20 @@ export function startIdeationGeneration(
  agentManager: AgentManager,
  mainWindow: BrowserWindow | null
 ): void {
+  // Get feature settings and merge with config
+  const featureSettings = getIdeationFeatureSettings();
+  const configWithSettings: IdeationConfig = {
+    ...config,
+    model: config.model || featureSettings.model,
+    thinkingLevel: config.thinkingLevel || featureSettings.thinkingLevel
+  };
+
  debugLog('[Ideation Handler] Start generation request:', {
    projectId,
-    enabledTypes: config.enabledTypes,
-    maxIdeasPerType: config.maxIdeasPerType
+    enabledTypes: configWithSettings.enabledTypes,
+    maxIdeasPerType: configWithSettings.maxIdeasPerType,
+    model: configWithSettings.model,
+    thinkingLevel: configWithSettings.thinkingLevel
  });

  if (!mainWindow) return;
@@ -40,11 +84,13 @@ export function startIdeationGeneration(

  debugLog('[Ideation Handler] Starting agent manager generation:', {
    projectId,
-    projectPath: project.path
+    projectPath: project.path,
+    model: configWithSettings.model,
+    thinkingLevel: configWithSettings.thinkingLevel
  });

  // Start ideation generation via agent manager
-  agentManager.startIdeationGeneration(projectId, project.path, config, false);
+  agentManager.startIdeationGeneration(projectId, project.path, configWithSettings, false);

  // Send initial progress
  mainWindow.webContents.send(
@@ -68,6 +114,20 @@ export function refreshIdeationSession(
  agentManager: AgentManager,
  mainWindow: BrowserWindow | null
 ): void {
+  // Get feature settings and merge with config
+  const featureSettings = getIdeationFeatureSettings();
+  const configWithSettings: IdeationConfig = {
+    ...config,
+    model: config.model || featureSettings.model,
+    thinkingLevel: config.thinkingLevel || featureSettings.thinkingLevel
+  };
+
+  debugLog('[Ideation Handler] Refresh session request:', {
+    projectId,
+    model: configWithSettings.model,
+    thinkingLevel: configWithSettings.thinkingLevel
+  });
+
  if (!mainWindow) return;

  const project = projectStore.getProject(projectId);
@@ -81,7 +141,7 @@ export function refreshIdeationSession(
  }

  // Start ideation regeneration with refresh flag
-  agentManager.startIdeationGeneration(projectId, project.path, config, true);
+  agentManager.startIdeationGeneration(projectId, project.path, configWithSettings, true);

  // Send initial progress
  mainWindow.webContents.send(
@@ -136,8 +136,8 @@ const detectAutoBuildSourcePath = (): string | null => {
  // Add process.cwd() as last resort on all platforms
  possiblePaths.push(path.resolve(process.cwd(), 'auto-claude'));

-  // Enable debug logging with AUTO_CLAUDE_DEBUG=1
-  const debug = process.env.AUTO_CLAUDE_DEBUG === '1' || process.env.AUTO_CLAUDE_DEBUG === 'true';
+  // Enable debug logging with DEBUG=1
+  const debug = process.env.DEBUG === '1' || process.env.DEBUG === 'true';

  if (debug) {
    console.warn('[project-handlers:detectAutoBuildSourcePath] Platform:', process.platform);
@@ -164,7 +164,7 @@ const detectAutoBuildSourcePath = (): string | null => {
  }

  console.warn('[project-handlers:detectAutoBuildSourcePath] Could not auto-detect Auto Claude source path.');
-  console.warn('[project-handlers:detectAutoBuildSourcePath] Set AUTO_CLAUDE_DEBUG=1 environment variable for detailed path checking.');
+  console.warn('[project-handlers:detectAutoBuildSourcePath] Set DEBUG=1 environment variable for detailed path checking.');
  return null;
 };

@@ -1,13 +1,45 @@
-import { ipcMain } from 'electron';
+import { ipcMain, app } from 'electron';
 import type { BrowserWindow } from 'electron';
-import { IPC_CHANNELS, AUTO_BUILD_PATHS, getSpecsDir } from '../../shared/constants';
-import type { IPCResult, Roadmap, RoadmapFeature, RoadmapFeatureStatus, RoadmapGenerationStatus, Task, TaskMetadata, CompetitorAnalysis } from '../../shared/types';
+import { IPC_CHANNELS, AUTO_BUILD_PATHS, getSpecsDir, DEFAULT_APP_SETTINGS, DEFAULT_FEATURE_MODELS, DEFAULT_FEATURE_THINKING } from '../../shared/constants';
+import type { IPCResult, Roadmap, RoadmapFeature, RoadmapFeatureStatus, RoadmapGenerationStatus, Task, TaskMetadata, CompetitorAnalysis, AppSettings } from '../../shared/types';
+import type { RoadmapConfig } from '../agent/types';
 import path from 'path';
 import { existsSync, readFileSync, writeFileSync, mkdirSync, readdirSync } from 'fs';
 import { projectStore } from '../project-store';
 import { AgentManager } from '../agent';
 import { debugLog, debugError } from '../../shared/utils/debug-logger';

+/**
+ * Read feature settings from the settings file
+ */
+function getFeatureSettings(): { model?: string; thinkingLevel?: string } {
+  const settingsPath = path.join(app.getPath('userData'), 'settings.json');
+
+  try {
+    if (existsSync(settingsPath)) {
+      const content = readFileSync(settingsPath, 'utf-8');
+      const settings: AppSettings = { ...DEFAULT_APP_SETTINGS, ...JSON.parse(content) };
+
+      // Get roadmap-specific settings
+      const featureModels = settings.featureModels || DEFAULT_FEATURE_MODELS;
+      const featureThinking = settings.featureThinking || DEFAULT_FEATURE_THINKING;
+
+      return {
+        model: featureModels.roadmap,
+        thinkingLevel: featureThinking.roadmap
+      };
+    }
+  } catch (error) {
+    debugError('[Roadmap Handler] Failed to read feature settings:', error);
+  }
+
+  // Return defaults if settings file doesn't exist or fails to parse
+  return {
+    model: DEFAULT_FEATURE_MODELS.roadmap,
+    thinkingLevel: DEFAULT_FEATURE_THINKING.roadmap
+  };
+}
+

 /**
 * Register all roadmap-related IPC handlers
@@ -138,7 +170,7 @@ export function registerRoadmapHandlers(
            impact: feature.impact || 'medium',
            phaseId: feature.phase_id,
            dependencies: feature.dependencies || [],
-            status: feature.status || 'idea',
+            status: feature.status || 'under_review',
            acceptanceCriteria: feature.acceptance_criteria || [],
            userStories: feature.user_stories || [],
            linkedSpecId: feature.linked_spec_id,
@@ -172,10 +204,19 @@ export function registerRoadmapHandlers(

  ipcMain.on(
    IPC_CHANNELS.ROADMAP_GENERATE,
-    (_, projectId: string, enableCompetitorAnalysis?: boolean) => {
+    (_, projectId: string, enableCompetitorAnalysis?: boolean, refreshCompetitorAnalysis?: boolean) => {
+      // Get feature settings for roadmap
+      const featureSettings = getFeatureSettings();
+      const config: RoadmapConfig = {
+        model: featureSettings.model,
+        thinkingLevel: featureSettings.thinkingLevel
+      };
+
      debugLog('[Roadmap Handler] Generate request:', {
        projectId,
-        enableCompetitorAnalysis
+        enableCompetitorAnalysis,
+        refreshCompetitorAnalysis,
+        config
      });

      const mainWindow = getMainWindow();
@@ -194,11 +235,19 @@ export function registerRoadmapHandlers(

      debugLog('[Roadmap Handler] Starting agent manager generation:', {
        projectId,
-        projectPath: project.path
+        projectPath: project.path,
+        config
      });

      // Start roadmap generation via agent manager
-      agentManager.startRoadmapGeneration(projectId, project.path, false, enableCompetitorAnalysis ?? false);
+      agentManager.startRoadmapGeneration(
+        projectId,
+        project.path,
+        false, // refresh (not a refresh operation)
+        enableCompetitorAnalysis ?? false,
+        refreshCompetitorAnalysis ?? false,
+        config
+      );

      // Send initial progress
      mainWindow.webContents.send(
@@ -215,7 +264,21 @@ export function registerRoadmapHandlers(

  ipcMain.on(
    IPC_CHANNELS.ROADMAP_REFRESH,
-    (_, projectId: string, enableCompetitorAnalysis?: boolean) => {
+    (_, projectId: string, enableCompetitorAnalysis?: boolean, refreshCompetitorAnalysis?: boolean) => {
+      // Get feature settings for roadmap
+      const featureSettings = getFeatureSettings();
+      const config: RoadmapConfig = {
+        model: featureSettings.model,
+        thinkingLevel: featureSettings.thinkingLevel
+      };
+
+      debugLog('[Roadmap Handler] Refresh request:', {
+        projectId,
+        enableCompetitorAnalysis,
+        refreshCompetitorAnalysis,
+        config
+      });
+
      const mainWindow = getMainWindow();
      if (!mainWindow) return;

@@ -230,7 +293,14 @@ export function registerRoadmapHandlers(
      }

      // Start roadmap regeneration with refresh flag
-      agentManager.startRoadmapGeneration(projectId, project.path, true, enableCompetitorAnalysis ?? false);
+      agentManager.startRoadmapGeneration(
+        projectId,
+        project.path,
+        true, // refresh (this is a refresh operation)
+        enableCompetitorAnalysis ?? false,
+        refreshCompetitorAnalysis ?? false,
+        config
+      );

      // Send initial progress
      mainWindow.webContents.send(
@@ -275,7 +345,7 @@ export function registerRoadmapHandlers(
    async (
      _,
      projectId: string,
-      features: RoadmapFeature[]
+      roadmapData: Roadmap
    ): Promise<IPCResult> => {
      const project = projectStore.getProject(projectId);
      if (!project) {
@@ -294,10 +364,10 @@ export function registerRoadmapHandlers(

      try {
        const content = readFileSync(roadmapPath, 'utf-8');
-        const roadmap = JSON.parse(content);
+        const existingRoadmap = JSON.parse(content);

        // Transform camelCase features back to snake_case for JSON file
-        roadmap.features = features.map((feature) => ({
+        existingRoadmap.features = roadmapData.features.map((feature) => ({
          id: feature.id,
          title: feature.title,
          description: feature.description,
@@ -315,10 +385,10 @@ export function registerRoadmapHandlers(
        }));

        // Update metadata timestamp
-        roadmap.metadata = roadmap.metadata || {};
-        roadmap.metadata.updated_at = new Date().toISOString();
+        existingRoadmap.metadata = existingRoadmap.metadata || {};
+        existingRoadmap.metadata.updated_at = new Date().toISOString();

-        writeFileSync(roadmapPath, JSON.stringify(roadmap, null, 2));
+        writeFileSync(roadmapPath, JSON.stringify(existingRoadmap, null, 2));

        return { success: true };
      } catch (error) {
@@ -48,8 +48,8 @@ const detectAutoBuildSourcePath = (): string | null => {
  // Add process.cwd() as last resort on all platforms
  possiblePaths.push(path.resolve(process.cwd(), 'auto-claude'));

-  // Enable debug logging with AUTO_CLAUDE_DEBUG=1
-  const debug = process.env.AUTO_CLAUDE_DEBUG === '1' || process.env.AUTO_CLAUDE_DEBUG === 'true';
+  // Enable debug logging with DEBUG=1
+  const debug = process.env.DEBUG === '1' || process.env.DEBUG === 'true';

  if (debug) {
    console.warn('[detectAutoBuildSourcePath] Platform:', process.platform);
@@ -76,7 +76,7 @@ const detectAutoBuildSourcePath = (): string | null => {
  }

  console.warn('[detectAutoBuildSourcePath] Could not auto-detect Auto Claude source path. Please configure manually in settings.');
-  console.warn('[detectAutoBuildSourcePath] Set AUTO_CLAUDE_DEBUG=1 environment variable for detailed path checking.');
+  console.warn('[detectAutoBuildSourcePath] Set DEBUG=1 environment variable for detailed path checking.');
  return null;
 };

@@ -94,7 +94,8 @@ export function registerSettingsHandlers(
  ipcMain.handle(
    IPC_CHANNELS.SETTINGS_GET,
    async (): Promise<IPCResult<AppSettings>> => {
-      let settings = { ...DEFAULT_APP_SETTINGS };
+      let settings: AppSettings = { ...DEFAULT_APP_SETTINGS };
+      let needsSave = false;

      if (existsSync(settingsPath)) {
        try {
@@ -105,6 +106,18 @@ export function registerSettingsHandlers(
        }
      }

+      // Migration: Set agent profile to 'auto' for users who haven't made a selection (one-time)
+      // This ensures new users get the optimized 'auto' profile as the default
+      // while preserving existing user preferences
+      if (!settings._migratedAgentProfileToAuto) {
+        // Only set 'auto' if user hasn't made a selection yet
+        if (!settings.selectedAgentProfile) {
+          settings.selectedAgentProfile = 'auto';
+        }
+        settings._migratedAgentProfileToAuto = true;
+        needsSave = true;
+      }
+
      // If no manual autoBuildPath is set, try to auto-detect
      if (!settings.autoBuildPath) {
        const detectedPath = detectAutoBuildSourcePath();
@@ -113,6 +126,16 @@ export function registerSettingsHandlers(
        }
      }

+      // Persist migration changes
+      if (needsSave) {
+        try {
+          writeFileSync(settingsPath, JSON.stringify(settings, null, 2));
+        } catch (error) {
+          console.error('[SETTINGS_GET] Failed to persist migration:', error);
+          // Continue anyway - settings will be migrated in-memory for this session
+        }
+      }
+
      return { success: true, data: settings as AppSettings };
    }
  );
@@ -49,14 +49,14 @@ export function registerWorktreeHandlers(
            encoding: 'utf-8'
          }).trim();

-          // Get base branch (usually main or master)
+          // Get base branch - the current branch in the main project (where changes will be merged)
+          // This matches the Python merge logic which merges into the user's current branch
          let baseBranch = 'main';
          try {
-            // Try to get the default branch
-            baseBranch = execSync('git rev-parse --abbrev-ref origin/HEAD 2>/dev/null || echo main', {
+            baseBranch = execSync('git rev-parse --abbrev-ref HEAD', {
              cwd: project.path,
              encoding: 'utf-8'
-            }).trim().replace('origin/', '');
+            }).trim();
          } catch {
            baseBranch = 'main';
          }
@@ -145,13 +145,13 @@ export function registerWorktreeHandlers(
          return { success: false, error: 'No worktree found for this task' };
        }

-        // Get base branch
+        // Get base branch - the current branch in the main project (where changes will be merged)
        let baseBranch = 'main';
        try {
-          baseBranch = execSync('git rev-parse --abbrev-ref origin/HEAD 2>/dev/null || echo main', {
+          baseBranch = execSync('git rev-parse --abbrev-ref HEAD', {
            cwd: project.path,
            encoding: 'utf-8'
-          }).trim().replace('origin/', '');
+          }).trim();
        } catch {
          baseBranch = 'main';
        }
@@ -500,6 +500,21 @@ export function registerWorktreeHandlers(

              debug('Merge result. isStageOnly:', isStageOnly, 'newStatus:', newStatus, 'staged:', staged);

+              // Read suggested commit message if staging succeeded
+              let suggestedCommitMessage: string | undefined;
+              if (staged) {
+                const commitMsgPath = path.join(specDir, 'suggested_commit_message.txt');
+                try {
+                  if (existsSync(commitMsgPath)) {
+                    const { readFileSync } = require('fs');
+                    suggestedCommitMessage = readFileSync(commitMsgPath, 'utf-8').trim();
+                    debug('Read suggested commit message:', suggestedCommitMessage?.substring(0, 100));
+                  }
+                } catch (e) {
+                  debug('Failed to read suggested commit message:', e);
+                }
+              }
+
              // Persist the status change to implementation_plan.json
              const planPath = path.join(specDir, AUTO_BUILD_PATHS.IMPLEMENTATION_PLAN);
              try {
@@ -531,7 +546,8 @@ export function registerWorktreeHandlers(
                  success: true,
                  message,
                  staged,
-                  projectPath: staged ? project.path : undefined
+                  projectPath: staged ? project.path : undefined,
+                  suggestedCommitMessage
                }
              });
            } else {
@@ -865,13 +881,13 @@ export function registerWorktreeHandlers(
              encoding: 'utf-8'
            }).trim();

-            // Get base branch
+            // Get base branch - the current branch in the main project (where changes will be merged)
            let baseBranch = 'main';
            try {
-              baseBranch = execSync('git rev-parse --abbrev-ref origin/HEAD 2>/dev/null || echo main', {
+              baseBranch = execSync('git rev-parse --abbrev-ref HEAD', {
                cwd: project.path,
                encoding: 'utf-8'
-              }).trim().replace('origin/', '');
+              }).trim();
            } catch {
              baseBranch = 'main';
            }
@@ -8,7 +8,7 @@ import { TerminalManager } from '../terminal-manager';
 import { projectStore } from '../project-store';
 import { terminalNameGenerator } from '../terminal-name-generator';
 import { debugLog, debugError } from '../../shared/utils/debug-logger';
-import { escapeShellArg } from '../../shared/utils/shell-escape';
+import { escapeShellArg, escapeShellArgWindows } from '../../shared/utils/shell-escape';


 /**
@@ -327,13 +327,20 @@ export function registerTerminalHandlers(
        await new Promise(resolve => setTimeout(resolve, 500));

        // Build the login command with the profile's config dir
-        // Use export to ensure the variable persists, then run setup-token
+        // Use platform-specific syntax and escaping for environment variables
        let loginCommand: string;
        if (!profile.isDefault && profile.configDir) {
-          // Use export and run in subshell to ensure CLAUDE_CONFIG_DIR is properly set
-          // SECURITY: Use escapeShellArg to prevent command injection via configDir
-          const escapedConfigDir = escapeShellArg(profile.configDir);
-          loginCommand = `export CLAUDE_CONFIG_DIR=${escapedConfigDir} && echo "Config dir: $CLAUDE_CONFIG_DIR" && claude setup-token`;
+          if (process.platform === 'win32') {
+            // SECURITY: Use Windows-specific escaping for cmd.exe
+            const escapedConfigDir = escapeShellArgWindows(profile.configDir);
+            // Windows cmd.exe syntax: set "VAR=value" with %VAR% for expansion
+            loginCommand = `set "CLAUDE_CONFIG_DIR=${escapedConfigDir}" && echo Config dir: %CLAUDE_CONFIG_DIR% && claude setup-token`;
+          } else {
+            // SECURITY: Use POSIX escaping for bash/zsh
+            const escapedConfigDir = escapeShellArg(profile.configDir);
+            // Unix/Mac bash/zsh syntax: export VAR=value with $VAR for expansion
+            loginCommand = `export CLAUDE_CONFIG_DIR=${escapedConfigDir} && echo "Config dir: $CLAUDE_CONFIG_DIR" && claude setup-token`;
+          }
        } else {
          loginCommand = 'claude setup-token';
        }
@@ -3,9 +3,9 @@ import path from 'path';
 import { execSync } from 'child_process';

 /**
- * Debug logging - only logs when AUTO_CLAUDE_DEBUG env var is set
+ * Debug logging - only logs when DEBUG=true or in development mode
 */
-const DEBUG = process.env.AUTO_CLAUDE_DEBUG === 'true' || process.env.AUTO_CLAUDE_DEBUG === '1';
+const DEBUG = process.env.DEBUG === 'true' || process.env.NODE_ENV === 'development';

 function debug(message: string, data?: Record<string, unknown>): void {
  if (DEBUG) {
@@ -243,8 +243,8 @@ export class ProjectStore {
        if (existsSync(specFilePath)) {
          try {
            const content = readFileSync(specFilePath, 'utf-8');
-            // Extract first paragraph after "## Overview"
-            const overviewMatch = content.match(/## Overview\s*\n\n([^\n#]+)/);
+            // Extract first paragraph after "## Overview" - handle both with and without blank line
+            const overviewMatch = content.match(/## Overview\s*\n+([^\n#]+)/);
            if (overviewMatch) {
              description = overviewMatch[1].trim();
            }
@@ -258,6 +258,42 @@ export class ProjectStore {
          description = plan.description;
        }

+        // Fallback: read description from requirements.json if still not found
+        if (!description) {
+          const requirementsPath = path.join(specPath, AUTO_BUILD_PATHS.REQUIREMENTS);
+          if (existsSync(requirementsPath)) {
+            try {
+              const reqContent = readFileSync(requirementsPath, 'utf-8');
+              const requirements = JSON.parse(reqContent);
+              if (requirements.task_description) {
+                // Extract a clean summary from task_description (first line or first ~200 chars)
+                const taskDesc = requirements.task_description;
+                const firstLine = taskDesc.split('\n')[0].trim();
+                // If the first line is a title like "Investigate GitHub Issue #36", use the next meaningful line
+                if (firstLine.toLowerCase().startsWith('investigate') && taskDesc.includes('\n\n')) {
+                  const sections = taskDesc.split('\n\n');
+                  // Find the first paragraph that's not a title
+                  for (const section of sections) {
+                    const trimmed = section.trim();
+                    // Skip headers and short lines
+                    if (trimmed.startsWith('#') || trimmed.length < 20) continue;
+                    // Skip the "Please analyze" instruction at the end
+                    if (trimmed.startsWith('Please analyze')) continue;
+                    description = trimmed.substring(0, 200).split('\n')[0];
+                    break;
+                  }
+                }
+                // If still no description, use a shortened version of task_description
+                if (!description) {
+                  description = firstLine.substring(0, 150);
+                }
+              }
+            } catch {
+              // Ignore parse errors
+            }
+          }
+        }
+
        // Try to read task metadata
        const metadataPath = path.join(specPath, 'task_metadata.json');
        let metadata: TaskMetadata | undefined;
@@ -290,11 +326,30 @@ export class ProjectStore {
        const stagedInMainProject = planWithStaged?.stagedInMainProject;
        const stagedAt = planWithStaged?.stagedAt;

+        // Determine title - check if feature looks like a spec ID (e.g., "054-something-something")
+        let title = plan?.feature || plan?.title || dir.name;
+        const looksLikeSpecId = /^\d{3}-/.test(title);
+        if (looksLikeSpecId && existsSync(specFilePath)) {
+          try {
+            const specContent = readFileSync(specFilePath, 'utf-8');
+            // Extract title from first # line, handling patterns like:
+            // "# Quick Spec: Title" -> "Title"
+            // "# Specification: Title" -> "Title"
+            // "# Title" -> "Title"
+            const titleMatch = specContent.match(/^#\s+(?:Quick Spec:|Specification:)?\s*(.+)$/m);
+            if (titleMatch && titleMatch[1]) {
+              title = titleMatch[1].trim();
+            }
+          } catch {
+            // Keep the original title on error
+          }
+        }
+
        tasks.push({
          id: dir.name, // Use spec directory name as ID
          specId: dir.name,
          projectId,
-          title: plan?.feature || plan?.title || dir.name,
+          title,
          description,
          status,
          reviewReason,
@@ -44,6 +44,7 @@ export class TaskLogService extends EventEmitter {
    try {
      const content = readFileSync(logFile, 'utf-8');
      const logs = JSON.parse(content) as TaskLogs;
+      this.logCache.set(specDir, logs);
      return logs;
    } catch (error) {
      // JSON parse error - file may be mid-write, return cached version if available
@@ -7,9 +7,9 @@ import { detectRateLimit, createSDKRateLimitInfo, getProfileEnv } from './rate-l
 import { findPythonCommand, parsePythonCommand } from './python-detector';

 /**
- * Debug logging - only logs when AUTO_CLAUDE_DEBUG env var is set
+ * Debug logging - only logs when DEBUG=true or in development mode
 */
-const DEBUG = process.env.AUTO_CLAUDE_DEBUG === 'true' || process.env.AUTO_CLAUDE_DEBUG === '1';
+const DEBUG = process.env.DEBUG === 'true' || process.env.NODE_ENV === 'development';

 function debug(...args: unknown[]): void {
  if (DEBUG) {
@@ -7,9 +7,9 @@ import { detectRateLimit, createSDKRateLimitInfo, getProfileEnv } from './rate-l
 import { findPythonCommand, parsePythonCommand } from './python-detector';

 /**
- * Debug logging - only logs when AUTO_CLAUDE_DEBUG env var is set
+ * Debug logging - only logs when DEBUG=true or in development mode
 */
-const DEBUG = process.env.AUTO_CLAUDE_DEBUG === 'true' || process.env.AUTO_CLAUDE_DEBUG === '1';
+const DEBUG = process.env.DEBUG === 'true' || process.env.NODE_ENV === 'development';

 function debug(...args: unknown[]): void {
  if (DEBUG) {
@@ -52,8 +52,9 @@ export async function downloadAndApplyUpdate(
      debugLog('[Update] Using cached release info');
    }

-    // Use the release tarball URL
-    const tarballUrl = release.tarball_url;
+    // Use explicit tag reference URL to avoid HTTP 300 when branch/tag names collide
+    // See: https://github.com/AndyMik90/Auto-Claude/issues/78
+    const tarballUrl = `https://api.github.com/repos/${GITHUB_CONFIG.owner}/${GITHUB_CONFIG.repo}/tarball/refs/tags/${release.tag_name}`;
    const releaseVersion = parseVersionFromTag(release.tag_name);
    debugLog('[Update] Release version:', releaseVersion);
    debugLog('[Update] Tarball URL:', tarballUrl);
@@ -16,8 +16,8 @@ export interface RoadmapAPI {
  getRoadmap: (projectId: string) => Promise<IPCResult<Roadmap | null>>;
  getRoadmapStatus: (projectId: string) => Promise<IPCResult<{ isRunning: boolean }>>;
  saveRoadmap: (projectId: string, roadmap: Roadmap) => Promise<IPCResult>;
-  generateRoadmap: (projectId: string, enableCompetitorAnalysis?: boolean) => void;
-  refreshRoadmap: (projectId: string, enableCompetitorAnalysis?: boolean) => void;
+  generateRoadmap: (projectId: string, enableCompetitorAnalysis?: boolean, refreshCompetitorAnalysis?: boolean) => void;
+  refreshRoadmap: (projectId: string, enableCompetitorAnalysis?: boolean, refreshCompetitorAnalysis?: boolean) => void;
  stopRoadmap: (projectId: string) => Promise<IPCResult>;
  updateFeatureStatus: (
    projectId: string,
@@ -58,11 +58,11 @@ export const createRoadmapAPI = (): RoadmapAPI => ({
  saveRoadmap: (projectId: string, roadmap: Roadmap): Promise<IPCResult> =>
    invokeIpc(IPC_CHANNELS.ROADMAP_SAVE, projectId, roadmap),

-  generateRoadmap: (projectId: string, enableCompetitorAnalysis?: boolean): void =>
-    sendIpc(IPC_CHANNELS.ROADMAP_GENERATE, projectId, enableCompetitorAnalysis),
+  generateRoadmap: (projectId: string, enableCompetitorAnalysis?: boolean, refreshCompetitorAnalysis?: boolean): void =>
+    sendIpc(IPC_CHANNELS.ROADMAP_GENERATE, projectId, enableCompetitorAnalysis, refreshCompetitorAnalysis),

-  refreshRoadmap: (projectId: string, enableCompetitorAnalysis?: boolean): void =>
-    sendIpc(IPC_CHANNELS.ROADMAP_REFRESH, projectId, enableCompetitorAnalysis),
+  refreshRoadmap: (projectId: string, enableCompetitorAnalysis?: boolean, refreshCompetitorAnalysis?: boolean): void =>
+    sendIpc(IPC_CHANNELS.ROADMAP_REFRESH, projectId, enableCompetitorAnalysis, refreshCompetitorAnalysis),

  stopRoadmap: (projectId: string): Promise<IPCResult> =>
    invokeIpc(IPC_CHANNELS.ROADMAP_STOP, projectId),
@@ -17,7 +17,7 @@ import {
 } from './components/ui/tooltip';
 import { Sidebar, type SidebarView } from './components/Sidebar';
 import { KanbanBoard } from './components/KanbanBoard';
-import { TaskDetailPanel } from './components/TaskDetailPanel';
+import { TaskDetailModal } from './components/task-detail/TaskDetailModal';
 import { TaskCreationWizard } from './components/TaskCreationWizard';
 import { AppSettingsDialog, type AppSection } from './components/settings/AppSettings';
 import type { ProjectSettingsSection } from './components/settings/ProjectSettingsContent';
@@ -29,7 +29,6 @@ import { Insights } from './components/Insights';
 import { GitHubIssues } from './components/GitHubIssues';
 import { Changelog } from './components/Changelog';
 import { Worktrees } from './components/Worktrees';
-import { AgentProfiles } from './components/AgentProfiles';
 import { WelcomeScreen } from './components/WelcomeScreen';
 import { RateLimitModal } from './components/RateLimitModal';
 import { SDKRateLimitModal } from './components/SDKRateLimitModal';
@@ -43,7 +42,8 @@ import { useTaskStore, loadTasks } from './stores/task-store';
 import { useSettingsStore, loadSettings } from './stores/settings-store';
 import { useTerminalStore, restoreTerminalSessions } from './stores/terminal-store';
 import { useIpcListeners } from './hooks/useIpc';
-import type { Task, Project } from '../shared/types';
+import { COLOR_THEMES } from '../shared/constants';
+import type { Task, Project, ColorTheme } from '../shared/types';

 export function App() {
  // Load IPC listeners for real-time updates
@@ -177,21 +177,38 @@ export function App() {

  // Apply theme on load
  useEffect(() => {
+    const root = document.documentElement;
+
    const applyTheme = () => {
+      // Apply light/dark mode
      if (settings.theme === 'dark') {
-        document.documentElement.classList.add('dark');
+        root.classList.add('dark');
      } else if (settings.theme === 'light') {
-        document.documentElement.classList.remove('dark');
+        root.classList.remove('dark');
      } else {
        // System preference
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-          document.documentElement.classList.add('dark');
+          root.classList.add('dark');
        } else {
-          document.documentElement.classList.remove('dark');
+          root.classList.remove('dark');
        }
      }
    };

+    // Apply color theme via data-theme attribute
+    // Validate colorTheme against known themes, fallback to 'default' if invalid
+    const validThemeIds = COLOR_THEMES.map((t) => t.id);
+    const rawColorTheme = settings.colorTheme ?? 'default';
+    const colorTheme: ColorTheme = validThemeIds.includes(rawColorTheme as ColorTheme)
+      ? (rawColorTheme as ColorTheme)
+      : 'default';
+
+    if (colorTheme === 'default') {
+      root.removeAttribute('data-theme');
+    } else {
+      root.setAttribute('data-theme', colorTheme);
+    }
+
    applyTheme();

    // Listen for system theme changes
@@ -206,7 +223,7 @@ export function App() {
    return () => {
      mediaQuery.removeEventListener('change', handleChange);
    };
-  }, [settings.theme]);
+  }, [settings.theme, settings.colorTheme]);

  // Update selected task when tasks change (for real-time updates)
  useEffect(() => {
@@ -444,9 +461,6 @@ export function App() {
                {activeView === 'worktrees' && selectedProjectId && (
                  <Worktrees projectId={selectedProjectId} />
                )}
-                {activeView === 'agent-profiles' && (
-                  <AgentProfiles />
-                )}
                {activeView === 'agent-tools' && (
                  <div className="flex h-full items-center justify-center">
                    <div className="text-center">
@@ -469,10 +483,12 @@ export function App() {
          </main>
        </div>

-        {/* Task detail panel */}
-        {selectedTask && (
-          <TaskDetailPanel task={selectedTask} onClose={handleCloseTaskDetail} />
-        )}
+        {/* Task detail modal */}
+        <TaskDetailModal
+          open={!!selectedTask}
+          task={selectedTask}
+          onOpenChange={(open) => !open && handleCloseTaskDetail()}
+        />

        {/* Dialogs */}
        {selectedProjectId && (
@@ -24,7 +24,7 @@ function createTestFeature(overrides: Partial<RoadmapFeature> = {}): RoadmapFeat
    impact: 'medium',
    phaseId: 'phase-1',
    dependencies: [],
-    status: 'idea' as RoadmapFeatureStatus,
+    status: 'under_review' as RoadmapFeatureStatus,
    acceptanceCriteria: ['Test criteria'],
    userStories: ['As a user, I want to test'],
    ...overrides
@@ -309,7 +309,7 @@ describe('Roadmap Store', () => {
        impact: 'high' as const,
        phaseId: 'phase-1',
        dependencies: [],
-        status: 'idea' as RoadmapFeatureStatus,
+        status: 'under_review' as RoadmapFeatureStatus,
        acceptanceCriteria: ['Criteria 1'],
        userStories: ['User story 1']
      };
@@ -336,7 +336,7 @@ describe('Roadmap Store', () => {
        impact: 'medium' as const,
        phaseId: 'phase-1',
        dependencies: [],
-        status: 'idea' as RoadmapFeatureStatus,
+        status: 'under_review' as RoadmapFeatureStatus,
        acceptanceCriteria: [],
        userStories: []
      };
@@ -393,7 +393,7 @@ describe('Roadmap Store', () => {
        impact: 'high' as const,
        phaseId: 'phase-1',
        dependencies: [],
-        status: 'idea' as RoadmapFeatureStatus,
+        status: 'under_review' as RoadmapFeatureStatus,
        acceptanceCriteria: [],
        userStories: []
      });
@@ -414,7 +414,7 @@ describe('Roadmap Store', () => {
        impact: 'high' as const,
        phaseId: 'phase-1',
        dependencies: [],
-        status: 'idea' as RoadmapFeatureStatus,
+        status: 'under_review' as RoadmapFeatureStatus,
        acceptanceCriteria: [],
        userStories: []
      });
@@ -438,7 +438,7 @@ describe('Roadmap Store', () => {
        impact: 'medium' as const,
        phaseId: 'phase-3',
        dependencies: [],
-        status: 'idea' as RoadmapFeatureStatus,
+        status: 'under_review' as RoadmapFeatureStatus,
        acceptanceCriteria: [],
        userStories: []
      });
@@ -489,7 +489,7 @@ describe('Roadmap Store', () => {

  describe('updateFeatureStatus', () => {
    it('should update feature status by id', () => {
-      const features = [createTestFeature({ id: 'feature-1', status: 'idea' })];
+      const features = [createTestFeature({ id: 'feature-1', status: 'under_review' })];
      const roadmap = createTestRoadmap({ features });

      useRoadmapStore.setState({ roadmap });
@@ -502,8 +502,8 @@ describe('Roadmap Store', () => {
  });

  describe('updateFeatureLinkedSpec', () => {
-    it('should update linked spec and set status to planned', () => {
-      const features = [createTestFeature({ id: 'feature-1', status: 'idea' })];
+    it('should update linked spec and set status to in_progress', () => {
+      const features = [createTestFeature({ id: 'feature-1', status: 'under_review' })];
      const roadmap = createTestRoadmap({ features });

      useRoadmapStore.setState({ roadmap });
@@ -512,7 +512,7 @@ describe('Roadmap Store', () => {

      const state = useRoadmapStore.getState();
      expect(state.roadmap?.features[0].linkedSpecId).toBe('spec-abc');
-      expect(state.roadmap?.features[0].status).toBe('planned');
+      expect(state.roadmap?.features[0].status).toBe('in_progress');
    });
  });

@@ -596,9 +596,9 @@ describe('Roadmap Store', () => {
      it('should return correct stats', () => {
        const roadmap = createTestRoadmap({
          features: [
-            createTestFeature({ priority: 'must', status: 'idea', complexity: 'high' }),
+            createTestFeature({ priority: 'must', status: 'under_review', complexity: 'high' }),
            createTestFeature({ priority: 'must', status: 'planned', complexity: 'medium' }),
-            createTestFeature({ priority: 'should', status: 'idea', complexity: 'low' })
+            createTestFeature({ priority: 'should', status: 'under_review', complexity: 'low' })
          ]
        });

@@ -607,7 +607,7 @@ describe('Roadmap Store', () => {
        expect(stats.total).toBe(3);
        expect(stats.byPriority['must']).toBe(2);
        expect(stats.byPriority['should']).toBe(1);
-        expect(stats.byStatus['idea']).toBe(2);
+        expect(stats.byStatus['under_review']).toBe(2);
        expect(stats.byStatus['planned']).toBe(1);
        expect(stats.byComplexity['high']).toBe(1);
        expect(stats.byComplexity['medium']).toBe(1);
@@ -48,7 +48,8 @@ import {
 import type {
  RoadmapPhase,
  RoadmapFeaturePriority,
-  RoadmapFeatureStatus
+  RoadmapFeatureStatus,
+  FeatureSource
 } from '../../shared/types';

 /**
@@ -147,9 +148,10 @@ export function AddFeatureDialog({
        impact,
        phaseId,
        dependencies: [],
-        status: 'idea' as RoadmapFeatureStatus,
+        status: 'under_review' as RoadmapFeatureStatus,
        acceptanceCriteria: [],
-        userStories: []
+        userStories: [],
+        source: { provider: 'internal' }
      });

      // Persist to file via IPC
@@ -8,7 +8,7 @@
 * Used in TaskCreationWizard and TaskEditDialog.
 */
 import { useState } from 'react';
-import { Brain, Scale, Zap, Sliders, Sparkles, ChevronDown, ChevronUp } from 'lucide-react';
+import { Brain, Scale, Zap, Sliders, Sparkles, ChevronDown, ChevronUp, Pencil } from 'lucide-react';
 import { Label } from './ui/label';
 import {
  Select,
@@ -220,28 +220,37 @@ export function AgentProfileSelector({

      {/* Auto Profile - Phase Configuration */}
      {isAuto && (
-        <div className="space-y-3 rounded-lg border border-border bg-muted/30 p-4">
-          {/* Phase Summary */}
-          <div className="space-y-2">
-            <button
-              type="button"
-              onClick={() => setShowPhaseDetails(!showPhaseDetails)}
-              className={cn(
-                'flex w-full items-center justify-between text-sm',
-                'text-muted-foreground hover:text-foreground transition-colors'
+        <div className="rounded-lg border border-border bg-muted/30 overflow-hidden">
+          {/* Clickable Header */}
+          <button
+            type="button"
+            onClick={() => setShowPhaseDetails(!showPhaseDetails)}
+            className={cn(
+              'flex w-full items-center justify-between p-4 text-left',
+              'hover:bg-muted/50 transition-colors',
+              !disabled && 'cursor-pointer'
+            )}
+            disabled={disabled}
+          >
+            <div className="flex items-center gap-2">
+              <span className="font-medium text-sm text-foreground">Phase Configuration</span>
+              {!showPhaseDetails && (
+                <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                  <Pencil className="h-3 w-3" />
+                  <span>Click to customize</span>
+                </span>
              )}
-              disabled={disabled}
-            >
-              <span className="font-medium text-foreground">Phase Configuration</span>
-              {showPhaseDetails ? (
-                <ChevronUp className="h-4 w-4" />
-              ) : (
-                <ChevronDown className="h-4 w-4" />
-              )}
-            </button>
+            </div>
+            {showPhaseDetails ? (
+              <ChevronUp className="h-4 w-4 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+            )}
+          </button>

-            {/* Compact summary when collapsed */}
-            {!showPhaseDetails && (
+          {/* Compact summary when collapsed */}
+          {!showPhaseDetails && (
+            <div className="px-4 pb-4 -mt-1">
              <div className="grid grid-cols-2 gap-2 text-xs">
                {(Object.keys(PHASE_LABELS) as Array<keyof PhaseModelConfig>).map((phase) => {
                  const modelLabel = AVAILABLE_MODELS.find(m => m.value === currentPhaseModels[phase])?.label?.replace('Claude ', '') || currentPhaseModels[phase];
@@ -253,55 +262,61 @@ export function AgentProfileSelector({
                  );
                })}
              </div>
-            )}
-          </div>
+            </div>
+          )}

          {/* Detailed Phase Configuration */}
          {showPhaseDetails && (
-            <div className="space-y-4 pt-2">
+            <div className="px-4 pb-4 space-y-4 border-t border-border pt-4">
              {(Object.keys(PHASE_LABELS) as Array<keyof PhaseModelConfig>).map((phase) => (
                <div key={phase} className="space-y-2">
                  <div className="flex items-center justify-between">
-                    <Label className="text-xs font-medium text-muted-foreground">
+                    <Label className="text-xs font-medium text-foreground">
                      {PHASE_LABELS[phase].label}
                    </Label>
-                    <span className="text-xs text-muted-foreground">
+                    <span className="text-[10px] text-muted-foreground">
                      {PHASE_LABELS[phase].description}
                    </span>
                  </div>
                  <div className="grid grid-cols-2 gap-2">
-                    <Select
-                      value={currentPhaseModels[phase]}
-                      onValueChange={(value) => handlePhaseModelChange(phase, value as ModelType)}
-                      disabled={disabled}
-                    >
-                      <SelectTrigger className="h-8 text-xs">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {AVAILABLE_MODELS.map((m) => (
-                          <SelectItem key={m.value} value={m.value}>
-                            {m.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <Select
-                      value={currentPhaseThinking[phase]}
-                      onValueChange={(value) => handlePhaseThinkingChange(phase, value as ThinkingLevel)}
-                      disabled={disabled}
-                    >
-                      <SelectTrigger className="h-8 text-xs">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {THINKING_LEVELS.map((level) => (
-                          <SelectItem key={level.value} value={level.value}>
-                            {level.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
+                    <div className="space-y-1">
+                      <Label className="text-[10px] text-muted-foreground">Model</Label>
+                      <Select
+                        value={currentPhaseModels[phase]}
+                        onValueChange={(value) => handlePhaseModelChange(phase, value as ModelType)}
+                        disabled={disabled}
+                      >
+                        <SelectTrigger className="h-8 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {AVAILABLE_MODELS.map((m) => (
+                            <SelectItem key={m.value} value={m.value}>
+                              {m.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-1">
+                      <Label className="text-[10px] text-muted-foreground">Thinking</Label>
+                      <Select
+                        value={currentPhaseThinking[phase]}
+                        onValueChange={(value) => handlePhaseThinkingChange(phase, value as ThinkingLevel)}
+                        disabled={disabled}
+                      >
+                        <SelectTrigger className="h-8 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {THINKING_LEVELS.map((level) => (
+                            <SelectItem key={level.value} value={level.value}>
+                              {level.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
                  </div>
                </div>
              ))}
@@ -19,7 +19,7 @@ const iconMap: Record<string, React.ElementType> = {
 */
 export function AgentProfiles() {
  const settings = useSettingsStore((state) => state.settings);
-  const selectedProfileId = settings.selectedAgentProfile || 'balanced';
+  const selectedProfileId = settings.selectedAgentProfile || 'auto';

  const handleSelectProfile = async (profileId: string) => {
    await saveSettings({ selectedAgentProfile: profileId });
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {
  Dialog,
  DialogContent,
@@ -24,9 +24,10 @@ interface CustomModelModalProps {
  currentConfig?: InsightsModelConfig;
  onSave: (config: InsightsModelConfig) => void;
  onClose: () => void;
+  open?: boolean;
 }

-export function CustomModelModal({ currentConfig, onSave, onClose }: CustomModelModalProps) {
+export function CustomModelModal({ currentConfig, onSave, onClose, open = true }: CustomModelModalProps) {
  const [model, setModel] = useState<ModelType>(
    currentConfig?.model || 'sonnet'
  );
@@ -34,6 +35,14 @@ export function CustomModelModal({ currentConfig, onSave, onClose }: CustomModel
    currentConfig?.thinkingLevel || 'medium'
  );

+  // Sync internal state when modal opens or config changes
+  useEffect(() => {
+    if (open) {
+      setModel(currentConfig?.model || 'sonnet');
+      setThinkingLevel(currentConfig?.thinkingLevel || 'medium');
+    }
+  }, [open, currentConfig]);
+
  const handleSave = () => {
    onSave({
      profileId: 'custom',
@@ -43,7 +52,7 @@ export function CustomModelModal({ currentConfig, onSave, onClose }: CustomModel
  };

  return (
-    <Dialog open onOpenChange={onClose}>
+    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Custom Model Configuration</DialogTitle>
@@ -0,0 +1,131 @@
+import { Globe, RefreshCw, TrendingUp, CheckCircle } from 'lucide-react';
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from './ui/alert-dialog';
+import { Button } from './ui/button';
+
+interface ExistingCompetitorAnalysisDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onUseExisting: () => void;
+  onRunNew: () => void;
+  onSkip: () => void;
+  analysisDate?: Date;
+}
+
+export function ExistingCompetitorAnalysisDialog({
+  open,
+  onOpenChange,
+  onUseExisting,
+  onRunNew,
+  onSkip,
+  analysisDate,
+}: ExistingCompetitorAnalysisDialogProps) {
+  const handleUseExisting = () => {
+    onUseExisting();
+    onOpenChange(false);
+  };
+
+  const handleRunNew = () => {
+    onRunNew();
+    onOpenChange(false);
+  };
+
+  const handleSkip = () => {
+    onSkip();
+    onOpenChange(false);
+  };
+
+  const formatDate = (date?: Date) => {
+    if (!date) return 'recently';
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    }).format(date);
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="sm:max-w-[500px]">
+        <AlertDialogHeader>
+          <AlertDialogTitle className="flex items-center gap-2 text-foreground">
+            <TrendingUp className="h-5 w-5 text-primary" />
+            Competitor Analysis Options
+          </AlertDialogTitle>
+          <AlertDialogDescription className="text-muted-foreground">
+            This project has an existing competitor analysis from {formatDate(analysisDate)}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <div className="py-4 space-y-3">
+          {/* Option 1: Use existing (recommended) */}
+          <button
+            onClick={handleUseExisting}
+            className="w-full rounded-lg bg-primary/10 border border-primary/30 p-4 text-left hover:bg-primary/20 transition-colors"
+          >
+            <div className="flex items-start gap-3">
+              <CheckCircle className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <h4 className="text-sm font-medium text-foreground flex items-center gap-2">
+                  Use existing analysis
+                  <span className="text-xs text-primary font-normal">(Recommended)</span>
+                </h4>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Reuse the competitor insights you already have. Faster and no additional web searches.
+                </p>
+              </div>
+            </div>
+          </button>
+
+          {/* Option 2: Run new analysis */}
+          <button
+            onClick={handleRunNew}
+            className="w-full rounded-lg bg-muted/50 border border-border p-4 text-left hover:bg-muted transition-colors"
+          >
+            <div className="flex items-start gap-3">
+              <RefreshCw className="h-5 w-5 text-muted-foreground flex-shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <h4 className="text-sm font-medium text-foreground">
+                  Run new analysis
+                </h4>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Perform fresh web searches to get updated competitor information. Takes longer.
+                </p>
+              </div>
+            </div>
+          </button>
+
+          {/* Option 3: Skip */}
+          <button
+            onClick={handleSkip}
+            className="w-full rounded-lg bg-muted/30 border border-border/50 p-4 text-left hover:bg-muted/50 transition-colors"
+          >
+            <div className="flex items-start gap-3">
+              <Globe className="h-5 w-5 text-muted-foreground/60 flex-shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <h4 className="text-sm font-medium text-muted-foreground">
+                  Skip competitor analysis
+                </h4>
+                <p className="text-xs text-muted-foreground/80 mt-1">
+                  Generate roadmap without any competitor insights.
+                </p>
+              </div>
+            </div>
+          </button>
+        </div>
+
+        <AlertDialogFooter className="sm:justify-start">
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Brain, Scale, Zap, Sliders, Check } from 'lucide-react';
+import { Brain, Scale, Zap, Sparkles, Sliders, Check } from 'lucide-react';
 import { Button } from './ui/button';
 import {
  DropdownMenu,
@@ -22,7 +22,8 @@ interface InsightsModelSelectorProps {
 const iconMap: Record<string, React.ElementType> = {
  Brain,
  Scale,
-  Zap
+  Zap,
+  Sparkles
 };

 export function InsightsModelSelector({
@@ -32,8 +33,9 @@ export function InsightsModelSelector({
 }: InsightsModelSelectorProps) {
  const [showCustomModal, setShowCustomModal] = useState(false);

-  // Default to 'balanced' if no config
-  const selectedProfileId = currentConfig?.profileId || 'balanced';
+  // Default to 'balanced' if no config, or if 'auto' profile was selected (not applicable for insights)
+  const rawProfileId = currentConfig?.profileId || 'balanced';
+  const selectedProfileId = rawProfileId === 'auto' ? 'balanced' : rawProfileId;
  const profile = DEFAULT_AGENT_PROFILES.find(p => p.id === selectedProfileId);

  // Get the appropriate icon
@@ -90,7 +92,7 @@ export function InsightsModelSelector({
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-64">
          <DropdownMenuLabel>Agent Profile</DropdownMenuLabel>
-          {DEFAULT_AGENT_PROFILES.map((p) => {
+          {DEFAULT_AGENT_PROFILES.filter(p => !p.isAutoProfile).map((p) => {
            const ProfileIcon = iconMap[p.icon || 'Brain'];
            const isSelected = selectedProfileId === p.id;
            const modelLabel = AVAILABLE_MODELS.find(m => m.value === p.model)?.label;
@@ -132,13 +134,12 @@ export function InsightsModelSelector({
        </DropdownMenuContent>
      </DropdownMenu>

-      {showCustomModal && (
-        <CustomModelModal
-          currentConfig={currentConfig}
-          onSave={handleCustomSave}
-          onClose={() => setShowCustomModal(false)}
-        />
-      )}
+      <CustomModelModal
+        open={showCustomModal}
+        currentConfig={currentConfig}
+        onSave={handleCustomSave}
+        onClose={() => setShowCustomModal(false)}
+      />
    </>
  );
 }
@@ -1,13 +1,14 @@
 import { useState } from 'react';
 import { RoadmapGenerationProgress } from './RoadmapGenerationProgress';
 import { CompetitorAnalysisDialog } from './CompetitorAnalysisDialog';
+import { ExistingCompetitorAnalysisDialog } from './ExistingCompetitorAnalysisDialog';
 import { CompetitorAnalysisViewer } from './CompetitorAnalysisViewer';
 import { AddFeatureDialog } from './AddFeatureDialog';
 import { RoadmapHeader } from './roadmap/RoadmapHeader';
 import { RoadmapEmptyState } from './roadmap/RoadmapEmptyState';
 import { RoadmapTabs } from './roadmap/RoadmapTabs';
 import { FeatureDetailPanel } from './roadmap/FeatureDetailPanel';
-import { useRoadmapData, useFeatureActions, useRoadmapGeneration } from './roadmap/hooks';
+import { useRoadmapData, useFeatureActions, useRoadmapGeneration, useRoadmapSave, useFeatureDelete } from './roadmap/hooks';
 import { getCompetitorInsightsForFeature } from './roadmap/utils';
 import type { RoadmapFeature } from '../../shared/types';
 import type { RoadmapProps } from './roadmap/types';
@@ -15,14 +16,24 @@ import type { RoadmapProps } from './roadmap/types';
 export function Roadmap({ projectId, onGoToTask }: RoadmapProps) {
  // State management
  const [selectedFeature, setSelectedFeature] = useState<RoadmapFeature | null>(null);
-  const [activeTab, setActiveTab] = useState('phases');
+  const [activeTab, setActiveTab] = useState('kanban');
  const [showAddFeatureDialog, setShowAddFeatureDialog] = useState(false);
  const [showCompetitorViewer, setShowCompetitorViewer] = useState(false);

  // Custom hooks
  const { roadmap, competitorAnalysis, generationStatus } = useRoadmapData(projectId);
  const { convertFeatureToSpec } = useFeatureActions();
+  const { saveRoadmap } = useRoadmapSave(projectId);
+  const { deleteFeature } = useFeatureDelete(projectId);
  const {
+    competitorAnalysisDate,
+    // New dialog for existing analysis
+    showExistingAnalysisDialog,
+    setShowExistingAnalysisDialog,
+    handleUseExistingAnalysis,
+    handleRunNewAnalysis,
+    handleSkipAnalysis,
+    // Original dialog for no existing analysis
    showCompetitorDialog,
    setShowCompetitorDialog,
    handleGenerate,
@@ -61,12 +72,22 @@ export function Roadmap({ projectId, onGoToTask }: RoadmapProps) {
    return (
      <>
        <RoadmapEmptyState onGenerate={handleGenerate} />
+        {/* Dialog for projects WITHOUT existing competitor analysis */}
        <CompetitorAnalysisDialog
          open={showCompetitorDialog}
          onOpenChange={setShowCompetitorDialog}
          onAccept={handleCompetitorDialogAccept}
          onDecline={handleCompetitorDialogDecline}
        />
+        {/* Dialog for projects WITH existing competitor analysis */}
+        <ExistingCompetitorAnalysisDialog
+          open={showExistingAnalysisDialog}
+          onOpenChange={setShowExistingAnalysisDialog}
+          onUseExisting={handleUseExistingAnalysis}
+          onRunNew={handleRunNewAnalysis}
+          onSkip={handleSkipAnalysis}
+          analysisDate={competitorAnalysisDate}
+        />
      </>
    );
  }
@@ -92,6 +113,7 @@ export function Roadmap({ projectId, onGoToTask }: RoadmapProps) {
          onFeatureSelect={setSelectedFeature}
          onConvertToSpec={handleConvertToSpec}
          onGoToTask={handleGoToTask}
+          onSave={saveRoadmap}
        />
      </div>

@@ -102,11 +124,12 @@ export function Roadmap({ projectId, onGoToTask }: RoadmapProps) {
          onClose={() => setSelectedFeature(null)}
          onConvertToSpec={handleConvertToSpec}
          onGoToTask={handleGoToTask}
+          onDelete={deleteFeature}
          competitorInsights={getCompetitorInsightsForFeature(selectedFeature, competitorAnalysis)}
        />
      )}

-      {/* Competitor Analysis Permission Dialog */}
+      {/* Competitor Analysis Permission Dialog (no existing analysis) */}
      <CompetitorAnalysisDialog
        open={showCompetitorDialog}
        onOpenChange={setShowCompetitorDialog}
@@ -114,6 +137,16 @@ export function Roadmap({ projectId, onGoToTask }: RoadmapProps) {
        onDecline={handleCompetitorDialogDecline}
      />

+      {/* Competitor Analysis Options Dialog (existing analysis) */}
+      <ExistingCompetitorAnalysisDialog
+        open={showExistingAnalysisDialog}
+        onOpenChange={setShowExistingAnalysisDialog}
+        onUseExisting={handleUseExistingAnalysis}
+        onRunNew={handleRunNewAnalysis}
+        onSkip={handleSkipAnalysis}
+        analysisDate={competitorAnalysisDate}
+      />
+
      {/* Competitor Analysis Viewer */}
      <CompetitorAnalysisViewer
        analysis={competitorAnalysis}
@@ -18,17 +18,18 @@ import {
  verticalListSortingStrategy,
  arrayMove
 } from '@dnd-kit/sortable';
-import { Plus, Inbox } from 'lucide-react';
+import { Plus, Inbox, Eye, Calendar, Play, Check } from 'lucide-react';
 import { ScrollArea } from './ui/scroll-area';
 import { Badge } from './ui/badge';
 import { Card } from './ui/card';
 import { SortableFeatureCard } from './SortableFeatureCard';
 import { cn } from '../lib/utils';
+import { useRoadmapStore } from '../stores/roadmap-store';
 import {
-  useRoadmapStore,
-  getFeaturesByPhase
-} from '../stores/roadmap-store';
-import type { RoadmapFeature, RoadmapPhase, Roadmap } from '../../shared/types';
+  ROADMAP_STATUS_COLUMNS,
+  type RoadmapStatusColumn
+} from '../../shared/constants';
+import type { RoadmapFeature, RoadmapFeatureStatus, Roadmap } from '../../shared/types';

 interface RoadmapKanbanViewProps {
  roadmap: Roadmap;
@@ -38,37 +39,43 @@ interface RoadmapKanbanViewProps {
  onSave?: () => void;
 }

-interface DroppablePhaseColumnProps {
-  phase: RoadmapPhase;
+interface DroppableStatusColumnProps {
+  column: RoadmapStatusColumn;
  features: RoadmapFeature[];
+  roadmap: Roadmap;
  onFeatureClick: (feature: RoadmapFeature) => void;
  onConvertToSpec?: (feature: RoadmapFeature) => void;
  onGoToTask?: (specId: string) => void;
  isOver: boolean;
 }

-// Get phase status color for column header
-function getPhaseStatusColor(status: string): string {
-  switch (status) {
-    case 'completed':
-      return 'border-t-success';
-    case 'in_progress':
-      return 'border-t-primary';
+// Get icon component for status
+function getStatusIcon(iconName: string) {
+  switch (iconName) {
+    case 'Eye':
+      return <Eye className="h-3.5 w-3.5" />;
+    case 'Calendar':
+      return <Calendar className="h-3.5 w-3.5" />;
+    case 'Play':
+      return <Play className="h-3.5 w-3.5" />;
+    case 'Check':
+      return <Check className="h-3.5 w-3.5" />;
    default:
-      return 'border-t-muted-foreground/30';
+      return null;
  }
 }

-function DroppablePhaseColumn({
-  phase,
+function DroppableStatusColumn({
+  column,
  features,
+  roadmap,
  onFeatureClick,
  onConvertToSpec,
  onGoToTask,
  isOver
-}: DroppablePhaseColumnProps) {
+}: DroppableStatusColumnProps) {
  const { setNodeRef } = useDroppable({
-    id: phase.id
+    id: column.id
  });

  const featureIds = features.map((f) => f.id);
@@ -78,7 +85,7 @@ function DroppablePhaseColumn({
      ref={setNodeRef}
      className={cn(
        'flex min-w-80 w-80 shrink-0 flex-col rounded-xl border border-white/5 bg-linear-to-b from-secondary/30 to-transparent backdrop-blur-sm transition-all duration-200',
-        getPhaseStatusColor(phase.status),
+        column.color,
        'border-t-2',
        isOver && 'drop-zone-highlight'
      )}
@@ -87,29 +94,26 @@ function DroppablePhaseColumn({
      <div className="flex items-center justify-between p-4 border-b border-white/5">
        <div className="flex items-center gap-2.5">
          <div
-            className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-semibold ${
-              phase.status === 'completed'
+            className={cn(
+              'w-6 h-6 rounded-full flex items-center justify-center',
+              column.id === 'done'
                ? 'bg-success/10 text-success'
-                : phase.status === 'in_progress'
+                : column.id === 'in_progress'
                ? 'bg-primary/10 text-primary'
+                : column.id === 'planned'
+                ? 'bg-info/10 text-info'
                : 'bg-muted text-muted-foreground'
-            }`}
+            )}
          >
-            {phase.order}
+            {getStatusIcon(column.icon)}
          </div>
-          <h2 className="font-semibold text-sm text-foreground truncate max-w-[180px]">
-            {phase.name}
+          <h2 className="font-semibold text-sm text-foreground">
+            {column.label}
          </h2>
          <span className="column-count-badge">
            {features.length}
          </span>
        </div>
-        <Badge
-          variant={phase.status === 'completed' ? 'default' : 'outline'}
-          className="text-xs"
-        >
-          {phase.status.replace('_', ' ')}
-        </Badge>
      </div>

      {/* Features list */}
@@ -151,6 +155,7 @@ function DroppablePhaseColumn({
                  <SortableFeatureCard
                    key={feature.id}
                    feature={feature}
+                    roadmap={roadmap}
                    onClick={() => onFeatureClick(feature)}
                    onConvertToSpec={onConvertToSpec}
                    onGoToTask={onGoToTask}
@@ -175,8 +180,7 @@ export function RoadmapKanbanView({
  const [activeFeature, setActiveFeature] = useState<RoadmapFeature | null>(null);
  const [overColumnId, setOverColumnId] = useState<string | null>(null);

-  const reorderFeatures = useRoadmapStore((state) => state.reorderFeatures);
-  const updateFeaturePhase = useRoadmapStore((state) => state.updateFeaturePhase);
+  const updateFeatureStatus = useRoadmapStore((state) => state.updateFeatureStatus);

  const sensors = useSensors(
    useSensor(PointerSensor, {
@@ -189,17 +193,17 @@ export function RoadmapKanbanView({
    })
  );

-  // Get features grouped by phase
-  const featuresByPhase = useMemo(() => {
+  // Get features grouped by status
+  const featuresByStatus = useMemo(() => {
    const grouped: Record<string, RoadmapFeature[]> = {};
-    roadmap.phases.forEach((phase) => {
-      grouped[phase.id] = getFeaturesByPhase(roadmap, phase.id);
+    ROADMAP_STATUS_COLUMNS.forEach((column) => {
+      grouped[column.id] = roadmap.features.filter((f) => f.status === column.id);
    });
    return grouped;
-  }, [roadmap]);
+  }, [roadmap.features]);

-  // Get all phase IDs for detecting column drops
-  const phaseIds = useMemo(() => roadmap.phases.map((p) => p.id), [roadmap.phases]);
+  // Get all status IDs for detecting column drops
+  const statusIds = useMemo(() => ROADMAP_STATUS_COLUMNS.map((c) => c.id), []);

  const handleDragStart = (event: DragStartEvent) => {
    const { active } = event;
@@ -219,16 +223,16 @@ export function RoadmapKanbanView({

    const overId = over.id as string;

-    // Check if over a phase column
-    if (phaseIds.includes(overId)) {
+    // Check if over a status column
+    if (statusIds.includes(overId)) {
      setOverColumnId(overId);
      return;
    }

-    // Check if over a feature - get its phase
+    // Check if over a feature - get its status
    const overFeature = roadmap.features.find((f) => f.id === overId);
    if (overFeature) {
-      setOverColumnId(overFeature.phaseId);
+      setOverColumnId(overFeature.status);
    }
  };

@@ -245,59 +249,36 @@ export function RoadmapKanbanView({

    if (!draggedFeature) return;

-    // Determine target phase
-    let targetPhaseId: string;
-    let targetFeatureIndex: number = -1;
+    // Determine target status
+    let targetStatus: RoadmapFeatureStatus;

-    if (phaseIds.includes(overId)) {
-      // Dropped directly on a phase column
-      targetPhaseId = overId;
+    if (statusIds.includes(overId)) {
+      // Dropped directly on a status column
+      targetStatus = overId as RoadmapFeatureStatus;
    } else {
-      // Dropped on a feature - get its phase and position
+      // Dropped on a feature - get its status
      const overFeature = roadmap.features.find((f) => f.id === overId);
      if (!overFeature) return;
-      targetPhaseId = overFeature.phaseId;
-      const targetFeatures = featuresByPhase[targetPhaseId] || [];
-      targetFeatureIndex = targetFeatures.findIndex((f) => f.id === overId);
+      targetStatus = overFeature.status;
    }

-    const sourcePhaseId = draggedFeature.phaseId;
+    const sourceStatus = draggedFeature.status;

-    if (sourcePhaseId !== targetPhaseId) {
-      // Moving to a different phase
-      updateFeaturePhase(activeFeatureId, targetPhaseId);
-
-      // If dropped on a specific feature, reorder within the new phase
-      if (targetFeatureIndex !== -1) {
-        const targetFeatures = [...(featuresByPhase[targetPhaseId] || [])];
-        // Add the moved feature at the target position
-        const updatedIds = targetFeatures.map((f) => f.id);
-        if (!updatedIds.includes(activeFeatureId)) {
-          updatedIds.splice(targetFeatureIndex, 0, activeFeatureId);
-          reorderFeatures(targetPhaseId, updatedIds);
-        }
-      }
+    if (sourceStatus !== targetStatus) {
+      // Moving to a different status
+      updateFeatureStatus(activeFeatureId, targetStatus);

      // Trigger save callback
      onSave?.();
-    } else {
-      // Reordering within the same phase
-      const sourceFeatures = featuresByPhase[sourcePhaseId] || [];
-      const oldIndex = sourceFeatures.findIndex((f) => f.id === activeFeatureId);
-      const newIndex = targetFeatureIndex !== -1 ? targetFeatureIndex : sourceFeatures.length - 1;
-
-      if (oldIndex !== newIndex) {
-        const reorderedIds = arrayMove(
-          sourceFeatures.map((f) => f.id),
-          oldIndex,
-          newIndex
-        );
-        reorderFeatures(sourcePhaseId, reorderedIds);
-
-        // Trigger save callback
-        onSave?.();
-      }
    }
+    // Note: We don't support reordering within status columns for now
+    // Features are displayed in their natural order within each status
+  };
+
+  // Get status label for a feature (for display in drag overlay)
+  const getStatusLabelForFeature = (feature: RoadmapFeature) => {
+    const statusColumn = ROADMAP_STATUS_COLUMNS.find((c) => c.id === feature.status);
+    return statusColumn?.label || 'Unknown Status';
  };

  return (
@@ -311,19 +292,18 @@ export function RoadmapKanbanView({
        onDragEnd={handleDragEnd}
      >
        <div className="flex flex-1 gap-4 overflow-x-auto p-6">
-          {roadmap.phases
-            .sort((a, b) => a.order - b.order)
-            .map((phase) => (
-              <DroppablePhaseColumn
-                key={phase.id}
-                phase={phase}
-                features={featuresByPhase[phase.id] || []}
-                onFeatureClick={onFeatureClick}
-                onConvertToSpec={onConvertToSpec}
-                onGoToTask={onGoToTask}
-                isOver={overColumnId === phase.id}
-              />
-            ))}
+          {ROADMAP_STATUS_COLUMNS.map((column) => (
+            <DroppableStatusColumn
+              key={column.id}
+              column={column}
+              features={featuresByStatus[column.id] || []}
+              roadmap={roadmap}
+              onFeatureClick={onFeatureClick}
+              onConvertToSpec={onConvertToSpec}
+              onGoToTask={onGoToTask}
+              isOver={overColumnId === column.id}
+            />
+          ))}
        </div>

        {/* Drag overlay - enhanced visual feedback */}
@@ -331,6 +311,11 @@ export function RoadmapKanbanView({
          {activeFeature ? (
            <div className="drag-overlay-card">
              <Card className="p-4 w-80 shadow-2xl">
+                <div className="flex items-center gap-2 mb-1">
+                  <Badge variant="outline" className="text-[10px] px-1.5 py-0">
+                    {getStatusLabelForFeature(activeFeature)}
+                  </Badge>
+                </div>
                <div className="font-medium">{activeFeature.title}</div>
                <p className="text-sm text-muted-foreground line-clamp-2 mt-1">
                  {activeFeature.description}
@@ -4,8 +4,6 @@ import {
  Plus,
  Settings,
  Trash2,
-  Moon,
-  Sun,
  LayoutGrid,
  Terminal,
  Map,
@@ -18,8 +16,7 @@ import {
  FileText,
  Sparkles,
  GitBranch,
-  HelpCircle,
-  UserCog
+  HelpCircle
 } from 'lucide-react';
 import { Button } from './ui/button';
 import { ScrollArea } from './ui/scroll-area';
@@ -53,13 +50,13 @@ import {
  checkProjectVersion,
  updateProjectAutoBuild
 } from '../stores/project-store';
-import { useSettingsStore, saveSettings } from '../stores/settings-store';
+import { useSettingsStore } from '../stores/settings-store';
 import { AddProjectModal } from './AddProjectModal';
 import { GitSetupModal } from './GitSetupModal';
 import { RateLimitIndicator } from './RateLimitIndicator';
 import type { Project, AutoBuildVersionInfo, GitStatus } from '../../shared/types';

-export type SidebarView = 'kanban' | 'terminals' | 'roadmap' | 'context' | 'ideation' | 'github-issues' | 'changelog' | 'insights' | 'worktrees' | 'agent-tools' | 'agent-profiles';
+export type SidebarView = 'kanban' | 'terminals' | 'roadmap' | 'context' | 'ideation' | 'github-issues' | 'changelog' | 'insights' | 'worktrees' | 'agent-tools';

 interface SidebarProps {
  onSettingsClick: () => void;
@@ -87,8 +84,7 @@ const projectNavItems: NavItem[] = [

 const toolsNavItems: NavItem[] = [
  { id: 'github-issues', label: 'GitHub Issues', icon: Github, shortcut: 'G' },
-  { id: 'worktrees', label: 'Worktrees', icon: GitBranch, shortcut: 'W' },
-  { id: 'agent-profiles', label: 'Agent Profiles', icon: UserCog, shortcut: 'P' }
+  { id: 'worktrees', label: 'Worktrees', icon: GitBranch, shortcut: 'W' }
 ];

 export function Sidebar({
@@ -267,21 +263,6 @@ export function Sidebar({
    }
  };

-  const toggleTheme = () => {
-    const newTheme = settings.theme === 'dark' ? 'light' : 'dark';
-    saveSettings({ theme: newTheme });
-
-    if (newTheme === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  };
-
-  const isDark =
-    settings.theme === 'dark' ||
-    (settings.theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-
  const handleNavClick = (view: SidebarView) => {
    onViewChange?.(view);
  };
@@ -317,18 +298,8 @@ export function Sidebar({
    <TooltipProvider>
      <div className="flex h-full w-64 flex-col bg-sidebar border-r border-border">
        {/* Header with drag area - extra top padding for macOS traffic lights */}
-        <div className="electron-drag flex h-14 items-center justify-between px-4 pt-6">
+        <div className="electron-drag flex h-14 items-center px-4 pt-6">
          <span className="electron-no-drag text-lg font-bold text-primary">Auto Claude</span>
-          <div className="electron-no-drag flex items-center gap-1">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" onClick={toggleTheme}>
-                  {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Toggle theme</TooltipContent>
-            </Tooltip>
-          </div>
        </div>

        <Separator className="mt-2" />
@@ -9,17 +9,18 @@ import {
  TooltipContent,
  TooltipTrigger
 } from './ui/tooltip';
-import { Play, ExternalLink, TrendingUp } from 'lucide-react';
+import { Play, ExternalLink, TrendingUp, Layers, ThumbsUp } from 'lucide-react';
 import {
  ROADMAP_PRIORITY_COLORS,
  ROADMAP_PRIORITY_LABELS,
  ROADMAP_COMPLEXITY_COLORS,
  ROADMAP_IMPACT_COLORS
 } from '../../shared/constants';
-import type { RoadmapFeature } from '../../shared/types';
+import type { RoadmapFeature, Roadmap } from '../../shared/types';

 interface SortableFeatureCardProps {
  feature: RoadmapFeature;
+  roadmap?: Roadmap;
  onClick: () => void;
  onConvertToSpec?: (feature: RoadmapFeature) => void;
  onGoToTask?: (specId: string) => void;
@@ -27,6 +28,7 @@ interface SortableFeatureCardProps {

 export function SortableFeatureCard({
  feature,
+  roadmap,
  onClick,
  onConvertToSpec,
  onGoToTask
@@ -51,6 +53,12 @@ export function SortableFeatureCard({
  const hasCompetitorInsight =
    !!feature.competitorInsightIds && feature.competitorInsightIds.length > 0;

+  // Get phase name for the feature
+  const phaseName = roadmap?.phases.find((p) => p.id === feature.phaseId)?.name;
+
+  // Check if feature has external source (e.g., Canny)
+  const isExternal = feature.source?.provider && feature.source.provider !== 'internal';
+
  return (
    <div
      ref={setNodeRef}
@@ -70,13 +78,29 @@ export function SortableFeatureCard({
        {/* Header - Title with priority badge and action button */}
        <div className="flex items-start justify-between gap-2">
          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-1.5 mb-1">
+            <div className="flex items-center gap-1.5 mb-1 flex-wrap">
              <Badge
                variant="outline"
                className={cn('text-[10px] px-1.5 py-0', ROADMAP_PRIORITY_COLORS[feature.priority])}
              >
                {ROADMAP_PRIORITY_LABELS[feature.priority]}
              </Badge>
+              {phaseName && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Badge
+                      variant="outline"
+                      className="text-[10px] px-1.5 py-0 text-muted-foreground border-muted-foreground/30"
+                    >
+                      <Layers className="h-2.5 w-2.5 mr-0.5" />
+                      {phaseName.length > 12 ? `${phaseName.slice(0, 12)}...` : phaseName}
+                    </Badge>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    Phase: {phaseName}
+                  </TooltipContent>
+                </Tooltip>
+              )}
              {hasCompetitorInsight && (
                <Tooltip>
                  <TooltipTrigger asChild>
@@ -135,7 +159,7 @@ export function SortableFeatureCard({
        </p>

        {/* Metadata badges - compact row */}
-        <div className="mt-2 flex items-center gap-1.5">
+        <div className="mt-2 flex items-center gap-1.5 flex-wrap">
          <Badge
            variant="outline"
            className={cn('text-[10px] px-1.5 py-0', ROADMAP_COMPLEXITY_COLORS[feature.complexity])}
@@ -148,6 +172,39 @@ export function SortableFeatureCard({
          >
            {feature.impact}
          </Badge>
+          {/* Show vote count if from external source */}
+          {feature.votes !== undefined && feature.votes > 0 && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Badge
+                  variant="outline"
+                  className="text-[10px] px-1.5 py-0 text-muted-foreground"
+                >
+                  <ThumbsUp className="h-2.5 w-2.5 mr-0.5" />
+                  {feature.votes}
+                </Badge>
+              </TooltipTrigger>
+              <TooltipContent>
+                {feature.votes} votes from user feedback
+              </TooltipContent>
+            </Tooltip>
+          )}
+          {/* Show external source indicator */}
+          {isExternal && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Badge
+                  variant="outline"
+                  className="text-[10px] px-1.5 py-0 text-orange-500 border-orange-500/30"
+                >
+                  {feature.source?.provider === 'canny' ? 'Canny' : 'External'}
+                </Badge>
+              </TooltipTrigger>
+              <TooltipContent>
+                Imported from {feature.source?.provider}
+              </TooltipContent>
+            </Tooltip>
+          )}
        </div>
      </Card>
    </div>
@@ -41,7 +41,6 @@ interface TaskCardProps {
 export function TaskCard({ task, onClick }: TaskCardProps) {
  const [isStuck, setIsStuck] = useState(false);
  const [isRecovering, setIsRecovering] = useState(false);
-  const [hasCheckedRunning, setHasCheckedRunning] = useState(false);

  const isRunning = task.status === 'in_progress';
  const executionPhase = task.executionProgress?.phase;
@@ -53,25 +52,46 @@ export function TaskCard({ task, onClick }: TaskCardProps) {
  // Check if task is stuck (status says in_progress but no actual process)
  // Add a grace period to avoid false positives during process spawn
  useEffect(() => {
-    let timeoutId: NodeJS.Timeout | undefined;
-
-    if (isRunning && !hasCheckedRunning) {
-      // Wait 2 seconds before checking - gives process time to spawn and register
-      timeoutId = setTimeout(() => {
-        checkTaskRunning(task.id).then((actuallyRunning) => {
-          setIsStuck(!actuallyRunning);
-          setHasCheckedRunning(true);
-        });
-      }, 2000);
-    } else if (!isRunning) {
+    if (!isRunning) {
      setIsStuck(false);
-      setHasCheckedRunning(false);
+      return;
    }

+    // Initial check after 2s grace period
+    const initialTimeout = setTimeout(() => {
+      checkTaskRunning(task.id).then((actuallyRunning) => {
+        setIsStuck(!actuallyRunning);
+      });
+    }, 2000);
+
+    // Periodic re-check every 15 seconds
+    const recheckInterval = setInterval(() => {
+      checkTaskRunning(task.id).then((actuallyRunning) => {
+        setIsStuck(!actuallyRunning);
+      });
+    }, 15000);
+
    return () => {
-      if (timeoutId) clearTimeout(timeoutId);
+      clearTimeout(initialTimeout);
+      clearInterval(recheckInterval);
    };
-  }, [task.id, isRunning, hasCheckedRunning]);
+  }, [task.id, isRunning]);
+
+  // Add visibility change handler to re-validate on focus
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible' && isRunning) {
+        checkTaskRunning(task.id).then((actuallyRunning) => {
+          setIsStuck(!actuallyRunning);
+        });
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [task.id, isRunning]);

  const handleStartStop = (e: React.MouseEvent) => {
    e.stopPropagation();
@@ -89,8 +109,6 @@ export function TaskCard({ task, onClick }: TaskCardProps) {
    const result = await recoverStuckTask(task.id, { autoRestart: true });
    if (result.success) {
      setIsStuck(false);
-      // Reset the check flag so it will re-verify running state
-      setHasCheckedRunning(false);
    }
    setIsRecovering(false);
  };
@@ -102,11 +102,12 @@ export function TaskCreationWizard({
  const [model, setModel] = useState<ModelType | ''>(selectedProfile.model);
  const [thinkingLevel, setThinkingLevel] = useState<ThinkingLevel | ''>(selectedProfile.thinkingLevel);
  // Auto profile - per-phase configuration
+  // Use custom settings from app settings if available, otherwise fall back to defaults
  const [phaseModels, setPhaseModels] = useState<PhaseModelConfig | undefined>(
-    selectedProfile.phaseModels || DEFAULT_PHASE_MODELS
+    settings.customPhaseModels || selectedProfile.phaseModels || DEFAULT_PHASE_MODELS
  );
  const [phaseThinking, setPhaseThinking] = useState<PhaseThinkingConfig | undefined>(
-    selectedProfile.phaseThinking || DEFAULT_PHASE_THINKING
+    settings.customPhaseThinking || selectedProfile.phaseThinking || DEFAULT_PHASE_THINKING
  );

  // Image attachments
@@ -143,8 +144,8 @@ export function TaskCreationWizard({
        setProfileId(draft.profileId || settings.selectedAgentProfile || 'auto');
        setModel(draft.model || selectedProfile.model);
        setThinkingLevel(draft.thinkingLevel || selectedProfile.thinkingLevel);
-        setPhaseModels(draft.phaseModels || selectedProfile.phaseModels || DEFAULT_PHASE_MODELS);
-        setPhaseThinking(draft.phaseThinking || selectedProfile.phaseThinking || DEFAULT_PHASE_THINKING);
+        setPhaseModels(draft.phaseModels || settings.customPhaseModels || selectedProfile.phaseModels || DEFAULT_PHASE_MODELS);
+        setPhaseThinking(draft.phaseThinking || settings.customPhaseThinking || selectedProfile.phaseThinking || DEFAULT_PHASE_THINKING);
        setImages(draft.images);
        setReferencedFiles(draft.referencedFiles ?? []);
        setRequireReviewBeforeCoding(draft.requireReviewBeforeCoding ?? false);
@@ -159,15 +160,15 @@ export function TaskCreationWizard({
        }
        // Note: Referenced Files section is always visible, no need to expand
      } else {
-        // No draft - initialize from selected profile
+        // No draft - initialize from selected profile and custom settings
        setProfileId(settings.selectedAgentProfile || 'auto');
        setModel(selectedProfile.model);
        setThinkingLevel(selectedProfile.thinkingLevel);
-        setPhaseModels(selectedProfile.phaseModels || DEFAULT_PHASE_MODELS);
-        setPhaseThinking(selectedProfile.phaseThinking || DEFAULT_PHASE_THINKING);
+        setPhaseModels(settings.customPhaseModels || selectedProfile.phaseModels || DEFAULT_PHASE_MODELS);
+        setPhaseThinking(settings.customPhaseThinking || selectedProfile.phaseThinking || DEFAULT_PHASE_THINKING);
      }
    }
-  }, [open, projectId, settings.selectedAgentProfile, selectedProfile.model, selectedProfile.thinkingLevel]);
+  }, [open, projectId, settings.selectedAgentProfile, settings.customPhaseModels, settings.customPhaseThinking, selectedProfile.model, selectedProfile.thinkingLevel]);

  // Fetch branches and project default branch when dialog opens
  useEffect(() => {
@@ -542,12 +543,12 @@ export function TaskCreationWizard({
    setPriority('');
    setComplexity('');
    setImpact('');
-    // Reset to selected profile defaults
+    // Reset to selected profile defaults and custom settings
    setProfileId(settings.selectedAgentProfile || 'auto');
    setModel(selectedProfile.model);
    setThinkingLevel(selectedProfile.thinkingLevel);
-    setPhaseModels(selectedProfile.phaseModels || DEFAULT_PHASE_MODELS);
-    setPhaseThinking(selectedProfile.phaseThinking || DEFAULT_PHASE_THINKING);
+    setPhaseModels(settings.customPhaseModels || selectedProfile.phaseModels || DEFAULT_PHASE_MODELS);
+    setPhaseThinking(settings.customPhaseThinking || selectedProfile.phaseThinking || DEFAULT_PHASE_THINKING);
    setImages([]);
    setReferencedFiles([]);
    setRequireReviewBeforeCoding(false);
@@ -38,7 +38,7 @@ export function IdeaDetailPanel({ idea, onClose, onConvert, onGoToTask, onDismis
  return (
    <div className="fixed inset-y-0 right-0 w-96 bg-card border-l border-border shadow-lg flex flex-col z-50">
      {/* Header */}
-      <div className="shrink-0 p-4 border-b border-border">
+      <div className="shrink-0 p-4 border-b border-border electron-no-drag">
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-2">
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import {
  Github,
  Loader2,
@@ -6,7 +6,10 @@ import {
  AlertCircle,
  Info,
  ExternalLink,
-  Terminal
+  Terminal,
+  Copy,
+  Check,
+  Clock
 } from 'lucide-react';
 import { Button } from '../ui/button';
 import { Card, CardContent } from '../ui/card';
@@ -29,6 +32,10 @@ function debugLog(message: string, data?: unknown) {
  }
 }

+// Authentication timeout in milliseconds (5 minutes)
+// GitHub device codes typically expire after 15 minutes, but 5 minutes is a reasonable UX timeout
+const AUTH_TIMEOUT_MS = 5 * 60 * 1000;
+
 /**
 * GitHub OAuth flow component using gh CLI
 * Guides users through authenticating with GitHub using the gh CLI
@@ -40,10 +47,54 @@ export function GitHubOAuthFlow({ onSuccess, onCancel }: GitHubOAuthFlowProps) {
  const [cliVersion, setCliVersion] = useState<string | undefined>();
  const [username, setUsername] = useState<string | undefined>();

+  // Device flow state for displaying code and auth URL
+  const [deviceCode, setDeviceCode] = useState<string | null>(null);
+  const [authUrl, setAuthUrl] = useState<string | null>(null);
+  const [browserOpened, setBrowserOpened] = useState<boolean>(false);
+  const [codeCopied, setCodeCopied] = useState<boolean>(false);
+  const [urlCopied, setUrlCopied] = useState<boolean>(false);
+  const [isTimeout, setIsTimeout] = useState<boolean>(false);
+
+  // Ref to track authentication timeout
+  const authTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Refs to track copy feedback timeouts
+  const codeCopyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const urlCopyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
  // Check gh CLI installation and authentication status on mount
  // Use a ref to prevent double-execution in React Strict Mode
  const hasCheckedRef = useRef(false);

+  // Clear the authentication timeout
+  const clearAuthTimeout = useCallback(() => {
+    if (authTimeoutRef.current) {
+      debugLog('Clearing auth timeout');
+      clearTimeout(authTimeoutRef.current);
+      authTimeoutRef.current = null;
+    }
+  }, []);
+
+  // Cleanup copy feedback timeouts on unmount
+  useEffect(() => {
+    return () => {
+      if (codeCopyTimeoutRef.current) {
+        clearTimeout(codeCopyTimeoutRef.current);
+      }
+      if (urlCopyTimeoutRef.current) {
+        clearTimeout(urlCopyTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Handle authentication timeout
+  const handleAuthTimeout = useCallback(() => {
+    debugLog('Authentication timeout triggered after 5 minutes');
+    setIsTimeout(true);
+    setError('Authentication timed out. The authentication window was open for too long. Please try again.');
+    setStatus('error');
+    authTimeoutRef.current = null;
+  }, []);
+
  useEffect(() => {
    if (hasCheckedRef.current) {
      debugLog('Skipping duplicate check (Strict Mode)');
@@ -52,8 +103,13 @@ export function GitHubOAuthFlow({ onSuccess, onCancel }: GitHubOAuthFlowProps) {
    hasCheckedRef.current = true;
    debugLog('Component mounted, checking GitHub status...');
    checkGitHubStatus();
+
+    // Cleanup timeout on unmount
+    return () => {
+      clearAuthTimeout();
+    };
    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run once on mount, checkGitHubStatus is intentionally excluded
-  }, []);
+  }, [clearAuthTimeout]);

  const checkGitHubStatus = async () => {
    debugLog('checkGitHubStatus() called');
@@ -138,21 +194,59 @@ export function GitHubOAuthFlow({ onSuccess, onCancel }: GitHubOAuthFlowProps) {
    setStatus('authenticating');
    setError(null);

+    // Reset device flow state
+    setDeviceCode(null);
+    setAuthUrl(null);
+    setBrowserOpened(false);
+    setCodeCopied(false);
+    setUrlCopied(false);
+    setIsTimeout(false);
+
+    // Clear any existing timeout and start a new one
+    clearAuthTimeout();
+    debugLog(`Starting auth timeout (${AUTH_TIMEOUT_MS / 1000 / 60} minutes)`);
+    authTimeoutRef.current = setTimeout(handleAuthTimeout, AUTH_TIMEOUT_MS);
+
    try {
      debugLog('Calling startGitHubAuth...');
      const result = await window.electronAPI.startGitHubAuth();
      debugLog('startGitHubAuth result:', result);

+      // Clear timeout since we got a response
+      clearAuthTimeout();
+
+      // Capture device flow info if available
+      if (result.data?.deviceCode) {
+        debugLog('Device code received:', result.data.deviceCode);
+        setDeviceCode(result.data.deviceCode);
+      }
+      if (result.data?.authUrl) {
+        debugLog('Auth URL received:', result.data.authUrl);
+        setAuthUrl(result.data.authUrl);
+      }
+      if (result.data?.browserOpened !== undefined) {
+        debugLog('Browser opened status:', result.data.browserOpened);
+        setBrowserOpened(result.data.browserOpened);
+      }
+
      if (result.success && result.data?.success) {
        debugLog('Auth successful, fetching token...');
        // Fetch the token and notify parent
        await fetchAndNotifyToken();
      } else {
        debugLog('Auth failed:', result.error);
-        setError(result.error || 'Authentication failed');
+        // Include fallback URL info in error message if available
+        const errorMessage = result.error || 'Authentication failed';
+        setError(errorMessage);
+        // Keep authUrl from response for fallback display
+        if (result.data?.fallbackUrl) {
+          setAuthUrl(result.data.fallbackUrl);
+        }
        setStatus('error');
      }
    } catch (err) {
+      // Clear timeout on error
+      clearAuthTimeout();
      debugLog('Error in handleStartAuth:', err);
      setError(err instanceof Error ? err.message : 'Authentication failed');
      setStatus('error');
@@ -169,6 +263,30 @@ export function GitHubOAuthFlow({ onSuccess, onCancel }: GitHubOAuthFlowProps) {
    checkGitHubStatus();
  };

+  const handleCopyDeviceCode = async () => {
+    if (!deviceCode) return;
+    debugLog('Copying device code to clipboard');
+    try {
+      await navigator.clipboard.writeText(deviceCode);
+      setCodeCopied(true);
+      // Clear any existing timeout before setting a new one
+      if (codeCopyTimeoutRef.current) {
+        clearTimeout(codeCopyTimeoutRef.current);
+      }
+      // Reset the copied state after 2 seconds
+      codeCopyTimeoutRef.current = setTimeout(() => setCodeCopied(false), 2000);
+    } catch (err) {
+      debugLog('Failed to copy device code:', err);
+    }
+  };
+
+  const handleOpenAuthUrl = () => {
+    if (authUrl) {
+      debugLog('Opening auth URL manually:', authUrl);
+      window.open(authUrl, '_blank');
+    }
+  };
+
  debugLog('Rendering with status:', status);

  return (
@@ -263,21 +381,81 @@ export function GitHubOAuthFlow({ onSuccess, onCancel }: GitHubOAuthFlowProps) {

      {/* Authenticating */}
      {status === 'authenticating' && (
-        <Card className="border border-info/30 bg-info/10">
-          <CardContent className="p-6">
-            <div className="flex items-center gap-4">
-              <Loader2 className="h-6 w-6 animate-spin text-info shrink-0" />
-              <div className="flex-1">
-                <h3 className="text-lg font-medium text-foreground">
-                  Authenticating...
-                </h3>
-                <p className="text-sm text-muted-foreground mt-1">
-                  Please complete the authentication in your browser. This window will update automatically.
-                </p>
+        <div className="space-y-4">
+          <Card className="border border-info/30 bg-info/10">
+            <CardContent className="p-6">
+              <div className="flex items-center gap-4">
+                <Loader2 className="h-6 w-6 animate-spin text-info shrink-0" />
+                <div className="flex-1">
+                  <h3 className="text-lg font-medium text-foreground">
+                    Authenticating...
+                  </h3>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    {browserOpened
+                      ? 'Please complete the authentication in your browser. This window will update automatically.'
+                      : 'Waiting for authentication flow to start...'}
+                  </p>
+                </div>
              </div>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
+
+          {/* Device Code Display */}
+          {deviceCode && (
+            <Card className="border border-primary/30 bg-primary/5">
+              <CardContent className="p-6">
+                <div className="text-center space-y-4">
+                  <div className="space-y-2">
+                    <p className="text-sm font-medium text-foreground">
+                      Your one-time code
+                    </p>
+                    <div className="flex items-center justify-center gap-3">
+                      <code className="text-3xl font-mono font-bold tracking-widest text-primary px-4 py-2 bg-primary/10 rounded-lg">
+                        {deviceCode}
+                      </code>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={handleCopyDeviceCode}
+                        className="shrink-0"
+                      >
+                        {codeCopied ? (
+                          <>
+                            <Check className="h-4 w-4 mr-1 text-success" />
+                            Copied
+                          </>
+                        ) : (
+                          <>
+                            <Copy className="h-4 w-4 mr-1" />
+                            Copy
+                          </>
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="text-sm text-muted-foreground space-y-2">
+                    <p>
+                      {browserOpened
+                        ? 'Enter this code in your browser to complete authentication.'
+                        : 'Copy this code, then open the link below to authenticate.'}
+                    </p>
+                    {!browserOpened && authUrl && (
+                      <Button
+                        variant="link"
+                        onClick={handleOpenAuthUrl}
+                        className="text-info hover:text-info/80 p-0 h-auto gap-1"
+                      >
+                        <ExternalLink className="h-4 w-4" />
+                        Open {authUrl}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
      )}

      {/* Success */}
@@ -302,22 +480,106 @@ export function GitHubOAuthFlow({ onSuccess, onCancel }: GitHubOAuthFlowProps) {
      {/* Error */}
      {status === 'error' && error && (
        <div className="space-y-4">
-          <Card className="border border-destructive/30 bg-destructive/10">
+          <Card className={`border ${isTimeout ? 'border-warning/30 bg-warning/10' : 'border-destructive/30 bg-destructive/10'}`}>
            <CardContent className="p-5">
              <div className="flex items-start gap-3">
-                <AlertCircle className="h-5 w-5 text-destructive shrink-0 mt-0.5" />
+                {isTimeout ? (
+                  <Clock className="h-5 w-5 text-warning shrink-0 mt-0.5" />
+                ) : (
+                  <AlertCircle className="h-5 w-5 text-destructive shrink-0 mt-0.5" />
+                )}
                <div className="flex-1">
-                  <h3 className="text-lg font-medium text-destructive">
-                    Authentication Failed
+                  <h3 className={`text-lg font-medium ${isTimeout ? 'text-warning' : 'text-destructive'}`}>
+                    {isTimeout ? 'Authentication Timed Out' : 'Authentication Failed'}
                  </h3>
-                  <p className="text-sm text-destructive/80 mt-1">{error}</p>
+                  <p className={`text-sm mt-1 ${isTimeout ? 'text-warning/80' : 'text-destructive/80'}`}>{error}</p>
                </div>
              </div>
            </CardContent>
          </Card>

+          {/* Fallback URL display when browser failed to open */}
+          {authUrl && (
+            <Card className="border border-warning/30 bg-warning/10">
+              <CardContent className="p-5">
+                <div className="space-y-4">
+                  <div className="flex items-start gap-3">
+                    <Info className="h-5 w-5 text-warning shrink-0 mt-0.5" />
+                    <div className="flex-1">
+                      <h3 className="text-base font-medium text-foreground">
+                        Complete Authentication Manually
+                      </h3>
+                      <p className="text-sm text-muted-foreground mt-1">
+                        The browser couldn't be opened automatically. Please visit the URL below to complete authentication:
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col gap-3">
+                    <div className="flex items-center gap-2 p-3 bg-muted rounded-lg">
+                      <code className="text-sm font-mono text-foreground flex-1 break-all">
+                        {authUrl}
+                      </code>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={async () => {
+                          try {
+                            await navigator.clipboard.writeText(authUrl);
+                            setUrlCopied(true);
+                            // Clear any existing timeout before setting a new one
+                            if (urlCopyTimeoutRef.current) {
+                              clearTimeout(urlCopyTimeoutRef.current);
+                            }
+                            urlCopyTimeoutRef.current = setTimeout(() => setUrlCopied(false), 2000);
+                          } catch (err) {
+                            debugLog('Failed to copy URL:', err);
+                          }
+                        }}
+                        className="shrink-0"
+                      >
+                        {urlCopied ? (
+                          <>
+                            <Check className="h-4 w-4 mr-1 text-success" />
+                            Copied
+                          </>
+                        ) : (
+                          <>
+                            <Copy className="h-4 w-4 mr-1" />
+                            Copy
+                          </>
+                        )}
+                      </Button>
+                    </div>
+
+                    <Button
+                      variant="secondary"
+                      onClick={handleOpenAuthUrl}
+                      className="gap-2"
+                    >
+                      <ExternalLink className="h-4 w-4" />
+                      Open URL in Browser
+                    </Button>
+                  </div>
+
+                  {/* Device code reminder if available */}
+                  {deviceCode && (
+                    <div className="pt-2 border-t border-warning/20">
+                      <p className="text-sm text-muted-foreground">
+                        When prompted, enter this code:{' '}
+                        <code className="font-mono font-bold text-primary px-2 py-0.5 bg-primary/10 rounded">
+                          {deviceCode}
+                        </code>
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
          <div className="flex justify-center gap-3">
-            <Button onClick={handleRetry} variant="outline">
+            <Button onClick={handleStartAuth} variant="outline">
              Retry
            </Button>
            {onCancel && (
@@ -146,7 +146,7 @@ export function MemoryBackendSection({
              onValueChange={(value) => onUpdateConfig({
                graphitiProviderConfig: {
                  ...envConfig.graphitiProviderConfig,
-                  llmProvider: value as 'openai' | 'anthropic' | 'google' | 'groq',
+                  llmProvider: value as 'openai' | 'anthropic' | 'azure_openai' | 'ollama' | 'google' | 'groq',
                  embeddingProvider: envConfig.graphitiProviderConfig?.embeddingProvider || 'openai',
                }
              })}
@@ -155,10 +155,11 @@ export function MemoryBackendSection({
                <SelectValue placeholder="Select LLM provider" />
              </SelectTrigger>
              <SelectContent>
-                <SelectItem value="openai">OpenAI (GPT-5-mini)</SelectItem>
+                <SelectItem value="openai">OpenAI (GPT-4o-mini)</SelectItem>
                <SelectItem value="anthropic">Anthropic (Claude)</SelectItem>
-                <SelectItem value="google">Google (Gemini)</SelectItem>
-                <SelectItem value="groq">Groq (Llama)</SelectItem>
+                <SelectItem value="google">Google AI (Gemini)</SelectItem>
+                <SelectItem value="azure_openai">Azure OpenAI</SelectItem>
+                <SelectItem value="ollama">Ollama (Local)</SelectItem>
              </SelectContent>
            </Select>
          </div>
@@ -175,7 +176,7 @@ export function MemoryBackendSection({
                graphitiProviderConfig: {
                  ...envConfig.graphitiProviderConfig,
                  llmProvider: envConfig.graphitiProviderConfig?.llmProvider || 'openai',
-                  embeddingProvider: value as 'openai' | 'voyage' | 'google' | 'huggingface',
+                  embeddingProvider: value as 'openai' | 'voyage' | 'azure_openai' | 'ollama' | 'google' | 'huggingface',
                }
              })}
            >
@@ -185,8 +186,9 @@ export function MemoryBackendSection({
              <SelectContent>
                <SelectItem value="openai">OpenAI</SelectItem>
                <SelectItem value="voyage">Voyage AI</SelectItem>
-                <SelectItem value="google">Google</SelectItem>
-                <SelectItem value="huggingface">HuggingFace (Local)</SelectItem>
+                <SelectItem value="google">Google AI</SelectItem>
+                <SelectItem value="azure_openai">Azure OpenAI</SelectItem>
+                <SelectItem value="ollama">Ollama (Local)</SelectItem>
              </SelectContent>
            </Select>
          </div>
@@ -164,7 +164,7 @@ export function SecuritySettings({
                    updateEnvConfig({
                      graphitiProviderConfig: {
                        ...currentConfig,
-                        llmProvider: value as 'openai' | 'anthropic' | 'google' | 'groq',
+                        llmProvider: value as 'openai' | 'anthropic' | 'azure_openai' | 'ollama' | 'google' | 'groq',
                      }
                    });
                  }}
@@ -173,10 +173,11 @@ export function SecuritySettings({
                    <SelectValue placeholder="Select LLM provider" />
                  </SelectTrigger>
                  <SelectContent>
-                    <SelectItem value="openai">OpenAI (GPT-5-mini)</SelectItem>
+                    <SelectItem value="openai">OpenAI (GPT-4o-mini)</SelectItem>
                    <SelectItem value="anthropic">Anthropic (Claude)</SelectItem>
-                    <SelectItem value="google">Google (Gemini)</SelectItem>
-                    <SelectItem value="groq">Groq (Llama)</SelectItem>
+                    <SelectItem value="google">Google AI (Gemini)</SelectItem>
+                    <SelectItem value="azure_openai">Azure OpenAI</SelectItem>
+                    <SelectItem value="ollama">Ollama (Local)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
@@ -197,7 +198,7 @@ export function SecuritySettings({
                    updateEnvConfig({
                      graphitiProviderConfig: {
                        ...currentConfig,
-                        embeddingProvider: value as 'openai' | 'voyage' | 'google' | 'huggingface',
+                        embeddingProvider: value as 'openai' | 'voyage' | 'azure_openai' | 'ollama' | 'google' | 'huggingface',
                      }
                    });
                  }}
@@ -208,8 +209,9 @@ export function SecuritySettings({
                  <SelectContent>
                    <SelectItem value="openai">OpenAI</SelectItem>
                    <SelectItem value="voyage">Voyage AI</SelectItem>
-                    <SelectItem value="google">Google</SelectItem>
-                    <SelectItem value="huggingface">HuggingFace (Local)</SelectItem>
+                    <SelectItem value="google">Google AI</SelectItem>
+                    <SelectItem value="azure_openai">Azure OpenAI</SelectItem>
+                    <SelectItem value="ollama">Ollama (Local)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
  ChevronRight,
  Lightbulb,
@@ -8,10 +9,12 @@ import {
  Zap,
  ExternalLink,
  TrendingUp,
+  Trash2,
 } from 'lucide-react';
 import { Badge } from '../ui/badge';
 import { Button } from '../ui/button';
 import { Card } from '../ui/card';
+import { ScrollArea } from '../ui/scroll-area';
 import {
  ROADMAP_PRIORITY_COLORS,
  ROADMAP_PRIORITY_LABELS,
@@ -25,15 +28,25 @@ export function FeatureDetailPanel({
  onClose,
  onConvertToSpec,
  onGoToTask,
+  onDelete,
  competitorInsights = [],
 }: FeatureDetailPanelProps) {
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  const handleDelete = () => {
+    if (onDelete) {
+      onDelete(feature.id);
+      onClose();
+    }
+  };
+
  return (
    <div className="fixed inset-y-0 right-0 w-96 bg-card border-l border-border shadow-lg flex flex-col z-50">
      {/* Header */}
-      <div className="shrink-0 p-4 border-b border-border">
-        <div className="flex items-start justify-between">
-          <div className="flex-1">
-            <div className="flex items-center gap-2 mb-2">
+      <div className="shrink-0 p-4 border-b border-border electron-no-drag">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-2 flex-wrap">
              <Badge variant="outline" className={ROADMAP_PRIORITY_COLORS[feature.priority]}>
                {ROADMAP_PRIORITY_LABELS[feature.priority]}
              </Badge>
@@ -44,21 +57,36 @@ export function FeatureDetailPanel({
                {feature.complexity}
              </Badge>
            </div>
-            <h2 className="font-semibold">{feature.title}</h2>
+            <h2 className="font-semibold truncate">{feature.title}</h2>
+          </div>
+          <div className="flex items-center gap-1 shrink-0 relative z-10 pointer-events-auto">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowDeleteConfirm(true);
+              }}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+            <Button type="button" variant="ghost" size="icon" onClick={onClose}>
+              <ChevronRight className="h-4 w-4" />
+            </Button>
          </div>
-          <Button variant="ghost" size="icon" onClick={onClose}>
-            <ChevronRight className="h-4 w-4" />
-          </Button>
        </div>
      </div>

      {/* Content */}
-      <div className="flex-1 overflow-auto p-4 space-y-6">
-        {/* Description */}
-        <div>
-          <h3 className="text-sm font-medium mb-2">Description</h3>
-          <p className="text-sm text-muted-foreground">{feature.description}</p>
-        </div>
+      <ScrollArea className="flex-1">
+        <div className="p-4 space-y-6">
+          {/* Description */}
+          <div>
+            <h3 className="text-sm font-medium mb-2">Description</h3>
+            <p className="text-sm text-muted-foreground">{feature.description}</p>
+          </div>

        {/* Rationale */}
        <div>
@@ -179,7 +207,8 @@ export function FeatureDetailPanel({
            </div>
          </div>
        )}
-      </div>
+        </div>
+      </ScrollArea>

      {/* Actions */}
      {feature.linkedSpecId ? (
@@ -199,6 +228,31 @@ export function FeatureDetailPanel({
          </div>
        )
      )}
+
+      {/* Delete Confirmation */}
+      {showDeleteConfirm && (
+        <div className="absolute inset-0 bg-background/95 flex items-center justify-center p-6 z-10">
+          <div className="text-center space-y-4">
+            <div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center mx-auto">
+              <Trash2 className="h-6 w-6 text-destructive" />
+            </div>
+            <div>
+              <h3 className="font-semibold">Delete Feature?</h3>
+              <p className="text-sm text-muted-foreground mt-1">
+                This will permanently remove "{feature.title}" from your roadmap.
+              </p>
+            </div>
+            <div className="flex gap-2 justify-center">
+              <Button variant="outline" onClick={() => setShowDeleteConfirm(false)}>
+                Cancel
+              </Button>
+              <Button variant="destructive" onClick={handleDelete}>
+                Delete
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
    </div>
  );
 }
@@ -65,30 +65,32 @@ export function RoadmapHeader({ roadmap, competitorAnalysis, onAddFeature, onRef
      </div>

      {/* Target Audience */}
-      <div className="mt-4 flex items-center gap-4 text-sm">
-        <div className="flex items-center gap-2">
-          <Users className="h-4 w-4 text-muted-foreground" />
-          <span className="text-muted-foreground">Target:</span>
-          <span className="font-medium">{roadmap.targetAudience.primary}</span>
+      {roadmap.targetAudience && (
+        <div className="mt-4 flex items-center gap-4 text-sm">
+          <div className="flex items-center gap-2">
+            <Users className="h-4 w-4 text-muted-foreground" />
+            <span className="text-muted-foreground">Target:</span>
+            <span className="font-medium">{roadmap.targetAudience.primary}</span>
+          </div>
+          {roadmap.targetAudience.secondary?.length > 0 && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="text-muted-foreground cursor-help underline decoration-dotted">
+                  +{roadmap.targetAudience.secondary.length} more personas
+                </div>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-md">
+                <div className="space-y-1">
+                  <div className="font-semibold mb-2">Secondary Personas:</div>
+                  {roadmap.targetAudience.secondary.map((persona) => (
+                    <div key={persona} className="text-sm">• {persona}</div>
+                  ))}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          )}
        </div>
-        {roadmap.targetAudience.secondary.length > 0 && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div className="text-muted-foreground cursor-help underline decoration-dotted">
-                +{roadmap.targetAudience.secondary.length} more personas
-              </div>
-            </TooltipTrigger>
-            <TooltipContent className="max-w-md">
-              <div className="space-y-1">
-                <div className="font-semibold mb-2">Secondary Personas:</div>
-                {roadmap.targetAudience.secondary.map((persona) => (
-                  <div key={persona} className="text-sm">• {persona}</div>
-                ))}
-              </div>
-            </TooltipContent>
-          </Tooltip>
-        )}
-      </div>
+      )}

      {/* Stats */}
      <div className="mt-4 flex items-center gap-6">
@@ -23,16 +23,28 @@ export function RoadmapTabs({
  onFeatureSelect,
  onConvertToSpec,
  onGoToTask,
+  onSave,
 }: RoadmapTabsProps) {
  return (
    <Tabs value={activeTab} onValueChange={onTabChange} className="h-full flex flex-col">
      <TabsList className="shrink-0 mx-4 mt-4">
+        <TabsTrigger value="kanban">Kanban</TabsTrigger>
        <TabsTrigger value="phases">Phases</TabsTrigger>
        <TabsTrigger value="features">All Features</TabsTrigger>
        <TabsTrigger value="priorities">By Priority</TabsTrigger>
-        <TabsTrigger value="kanban">Kanban</TabsTrigger>
      </TabsList>

+      {/* Kanban View */}
+      <TabsContent value="kanban" className="flex-1 overflow-hidden">
+        <RoadmapKanbanView
+          roadmap={roadmap}
+          onFeatureClick={onFeatureSelect}
+          onConvertToSpec={onConvertToSpec}
+          onGoToTask={onGoToTask}
+          onSave={onSave}
+        />
+      </TabsContent>
+
      {/* Phases View */}
      <TabsContent value="phases" className="flex-1 overflow-auto p-4">
        <div className="space-y-6">
@@ -115,16 +127,6 @@ export function RoadmapTabs({
          })}
        </div>
      </TabsContent>
-
-      {/* Kanban View */}
-      <TabsContent value="kanban" className="flex-1 overflow-hidden">
-        <RoadmapKanbanView
-          roadmap={roadmap}
-          onFeatureClick={onFeatureSelect}
-          onConvertToSpec={onConvertToSpec}
-          onGoToTask={onGoToTask}
-        />
-      </TabsContent>
    </Tabs>
  );
 }
@@ -57,7 +57,7 @@ export function useFeatureActions() {
        setSelectedFeature({
          ...feature,
          linkedSpecId: result.data.specId,
-          status: 'planned',
+          status: 'in_progress',
        });
      }
    }
@@ -68,23 +68,87 @@ export function useFeatureActions() {
  };
 }

+/**
+ * Hook to save roadmap changes to disk
+ *
+ * NOTE: Gets roadmap from store at call time (not render time) to ensure
+ * we save the latest state after Zustand updates (e.g., after drag-drop status change)
+ */
+export function useRoadmapSave(projectId: string) {
+  const saveRoadmap = async () => {
+    // Get current state at call time to avoid stale closure issues
+    const roadmap = useRoadmapStore.getState().roadmap;
+    if (!roadmap) return;
+
+    try {
+      await window.electronAPI.saveRoadmap(projectId, roadmap);
+    } catch (error) {
+      console.error('Failed to save roadmap:', error);
+    }
+  };
+
+  return { saveRoadmap };
+}
+
+/**
+ * Hook to delete features from roadmap
+ */
+export function useFeatureDelete(projectId: string) {
+  const deleteFeature = useRoadmapStore((state) => state.deleteFeature);
+
+  const handleDeleteFeature = async (featureId: string) => {
+    // Delete from store
+    deleteFeature(featureId);
+
+    // Persist to file
+    const roadmap = useRoadmapStore.getState().roadmap;
+    if (roadmap) {
+      try {
+        await window.electronAPI.saveRoadmap(projectId, roadmap);
+      } catch (error) {
+        console.error('Failed to save roadmap after delete:', error);
+      }
+    }
+  };
+
+  return { deleteFeature: handleDeleteFeature };
+}
+
 /**
 * Hook to manage roadmap generation actions
+ *
+ * Handles two scenarios:
+ * 1. No existing competitor analysis: Show simple enable/skip dialog
+ * 2. Existing competitor analysis: Show options to use existing, run new, or skip
 */
 export function useRoadmapGeneration(projectId: string) {
+  const competitorAnalysis = useRoadmapStore((state) => state.competitorAnalysis);
  const [pendingAction, setPendingAction] = useState<'generate' | 'refresh' | null>(null);
  const [showCompetitorDialog, setShowCompetitorDialog] = useState(false);
+  const [showExistingAnalysisDialog, setShowExistingAnalysisDialog] = useState(false);
+
+  // Check if we have existing competitor analysis
+  const hasExistingAnalysis = !!competitorAnalysis;

  const handleGenerate = () => {
    setPendingAction('generate');
-    setShowCompetitorDialog(true);
+    if (hasExistingAnalysis) {
+      setShowExistingAnalysisDialog(true);
+    } else {
+      setShowCompetitorDialog(true);
+    }
  };

  const handleRefresh = () => {
    setPendingAction('refresh');
-    setShowCompetitorDialog(true);
+    if (hasExistingAnalysis) {
+      setShowExistingAnalysisDialog(true);
+    } else {
+      setShowCompetitorDialog(true);
+    }
  };

+  // Handler for "Yes, Enable Analysis" (new competitor analysis)
  const handleCompetitorDialogAccept = () => {
    if (pendingAction === 'generate') {
      generateRoadmap(projectId, true); // Enable competitor analysis
@@ -94,6 +158,7 @@ export function useRoadmapGeneration(projectId: string) {
    setPendingAction(null);
  };

+  // Handler for "No, Skip Analysis"
  const handleCompetitorDialogDecline = () => {
    if (pendingAction === 'generate') {
      generateRoadmap(projectId, false); // Disable competitor analysis
@@ -103,12 +168,53 @@ export function useRoadmapGeneration(projectId: string) {
    setPendingAction(null);
  };

+  // Handler for "Use existing analysis" - reuses saved competitor data
+  const handleUseExistingAnalysis = () => {
+    // Enable competitor analysis but don't force refresh - backend will use existing if available
+    if (pendingAction === 'generate') {
+      generateRoadmap(projectId, true, false); // enableCompetitorAnalysis=true, refreshCompetitorAnalysis=false
+    } else if (pendingAction === 'refresh') {
+      refreshRoadmap(projectId, true, false); // enableCompetitorAnalysis=true, refreshCompetitorAnalysis=false
+    }
+    setPendingAction(null);
+  };
+
+  // Handler for "Run new analysis" - performs fresh web searches
+  const handleRunNewAnalysis = () => {
+    // Enable competitor analysis AND force refresh to run fresh web searches
+    if (pendingAction === 'generate') {
+      generateRoadmap(projectId, true, true); // enableCompetitorAnalysis=true, refreshCompetitorAnalysis=true
+    } else if (pendingAction === 'refresh') {
+      refreshRoadmap(projectId, true, true); // enableCompetitorAnalysis=true, refreshCompetitorAnalysis=true
+    }
+    setPendingAction(null);
+  };
+
+  // Handler for "Skip analysis"
+  const handleSkipAnalysis = () => {
+    if (pendingAction === 'generate') {
+      generateRoadmap(projectId, false);
+    } else if (pendingAction === 'refresh') {
+      refreshRoadmap(projectId, false);
+    }
+    setPendingAction(null);
+  };
+
  const handleStop = async () => {
    await stopRoadmap(projectId);
  };

  return {
    pendingAction,
+    hasExistingAnalysis,
+    competitorAnalysisDate: competitorAnalysis?.createdAt,
+    // New dialog for existing analysis
+    showExistingAnalysisDialog,
+    setShowExistingAnalysisDialog,
+    handleUseExistingAnalysis,
+    handleRunNewAnalysis,
+    handleSkipAnalysis,
+    // Original dialog for no existing analysis
    showCompetitorDialog,
    setShowCompetitorDialog,
    handleGenerate,
@@ -4,6 +4,6 @@ export { RoadmapTabs } from './RoadmapTabs';
 export { PhaseCard } from './PhaseCard';
 export { FeatureCard } from './FeatureCard';
 export { FeatureDetailPanel } from './FeatureDetailPanel';
-export { useRoadmapData, useFeatureActions, useRoadmapGeneration } from './hooks';
+export { useRoadmapData, useFeatureActions, useRoadmapGeneration, useRoadmapSave, useFeatureDelete } from './hooks';
 export { getCompetitorInsightsForFeature, hasCompetitorInsight } from './utils';
 export type * from './types';
@@ -27,6 +27,7 @@ export interface FeatureDetailPanelProps {
  onClose: () => void;
  onConvertToSpec: (feature: RoadmapFeature) => void;
  onGoToTask: (specId: string) => void;
+  onDelete?: (featureId: string) => void;
  competitorInsights?: CompetitorPainPoint[];
 }

@@ -49,4 +50,5 @@ export interface RoadmapTabsProps {
  onFeatureSelect: (feature: RoadmapFeature) => void;
  onConvertToSpec: (feature: RoadmapFeature) => void;
  onGoToTask: (specId: string) => void;
+  onSave?: () => void;
 }
@@ -0,0 +1,305 @@
+import { useState } from 'react';
+import { Brain, Scale, Zap, Check, Sparkles, ChevronDown, ChevronUp, RotateCcw } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import {
+  DEFAULT_AGENT_PROFILES,
+  AVAILABLE_MODELS,
+  THINKING_LEVELS,
+  DEFAULT_PHASE_MODELS,
+  DEFAULT_PHASE_THINKING
+} from '../../../shared/constants';
+import { useSettingsStore, saveSettings } from '../../stores/settings-store';
+import { SettingsSection } from './SettingsSection';
+import { Label } from '../ui/label';
+import { Button } from '../ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '../ui/select';
+import type { AgentProfile, PhaseModelConfig, PhaseThinkingConfig, ModelTypeShort, ThinkingLevel } from '../../../shared/types/settings';
+
+/**
+ * Icon mapping for agent profile icons
+ */
+const iconMap: Record<string, React.ElementType> = {
+  Brain,
+  Scale,
+  Zap,
+  Sparkles
+};
+
+const PHASE_LABELS: Record<keyof PhaseModelConfig, { label: string; description: string }> = {
+  spec: { label: 'Spec Creation', description: 'Discovery, requirements, context gathering' },
+  planning: { label: 'Planning', description: 'Implementation planning and architecture' },
+  coding: { label: 'Coding', description: 'Actual code implementation' },
+  qa: { label: 'QA Review', description: 'Quality assurance and validation' }
+};
+
+/**
+ * Agent Profile Settings component
+ * Displays preset agent profiles for quick model/thinking level configuration
+ * Used in the Settings page under Agent Settings
+ */
+export function AgentProfileSettings() {
+  const settings = useSettingsStore((state) => state.settings);
+  const selectedProfileId = settings.selectedAgentProfile || 'auto';
+  const [showPhaseConfig, setShowPhaseConfig] = useState(selectedProfileId === 'auto');
+
+  // Get current phase config from settings or defaults
+  const currentPhaseModels: PhaseModelConfig = settings.customPhaseModels || DEFAULT_PHASE_MODELS;
+  const currentPhaseThinking: PhaseThinkingConfig = settings.customPhaseThinking || DEFAULT_PHASE_THINKING;
+
+  const handleSelectProfile = async (profileId: string) => {
+    const success = await saveSettings({ selectedAgentProfile: profileId });
+    if (!success) {
+      // Log error for debugging - in future could show user toast notification
+      console.error('Failed to save agent profile selection');
+      return;
+    }
+    // Auto-expand phase config when Auto profile is selected
+    if (profileId === 'auto') {
+      setShowPhaseConfig(true);
+    }
+  };
+
+  const handlePhaseModelChange = async (phase: keyof PhaseModelConfig, value: ModelTypeShort) => {
+    const newPhaseModels = { ...currentPhaseModels, [phase]: value };
+    await saveSettings({ customPhaseModels: newPhaseModels });
+  };
+
+  const handlePhaseThinkingChange = async (phase: keyof PhaseThinkingConfig, value: ThinkingLevel) => {
+    const newPhaseThinking = { ...currentPhaseThinking, [phase]: value };
+    await saveSettings({ customPhaseThinking: newPhaseThinking });
+  };
+
+  const handleResetToDefaults = async () => {
+    await saveSettings({
+      customPhaseModels: DEFAULT_PHASE_MODELS,
+      customPhaseThinking: DEFAULT_PHASE_THINKING
+    });
+  };
+
+  /**
+   * Get human-readable model label
+   */
+  const getModelLabel = (modelValue: string): string => {
+    const model = AVAILABLE_MODELS.find((m) => m.value === modelValue);
+    return model?.label || modelValue;
+  };
+
+  /**
+   * Get human-readable thinking level label
+   */
+  const getThinkingLabel = (thinkingValue: string): string => {
+    const level = THINKING_LEVELS.find((l) => l.value === thinkingValue);
+    return level?.label || thinkingValue;
+  };
+
+  /**
+   * Check if current phase config differs from defaults
+   */
+  const hasCustomConfig = (): boolean => {
+    const phases: Array<keyof PhaseModelConfig> = ['spec', 'planning', 'coding', 'qa'];
+    return phases.some(
+      phase =>
+        currentPhaseModels[phase] !== DEFAULT_PHASE_MODELS[phase] ||
+        currentPhaseThinking[phase] !== DEFAULT_PHASE_THINKING[phase]
+    );
+  };
+
+  /**
+   * Render a single profile card
+   */
+  const renderProfileCard = (profile: AgentProfile) => {
+    const isSelected = selectedProfileId === profile.id;
+    const Icon = iconMap[profile.icon || 'Brain'] || Brain;
+
+    return (
+      <button
+        key={profile.id}
+        onClick={() => handleSelectProfile(profile.id)}
+        className={cn(
+          'relative w-full rounded-lg border p-4 text-left transition-all duration-200',
+          'hover:border-primary/50 hover:shadow-sm',
+          isSelected
+            ? 'border-primary bg-primary/5'
+            : 'border-border bg-card'
+        )}
+      >
+        {/* Selected indicator */}
+        {isSelected && (
+          <div className="absolute right-3 top-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary">
+            <Check className="h-3 w-3 text-primary-foreground" />
+          </div>
+        )}
+
+        {/* Profile content */}
+        <div className="flex items-start gap-3">
+          <div
+            className={cn(
+              'flex h-10 w-10 items-center justify-center rounded-lg shrink-0',
+              isSelected ? 'bg-primary/10' : 'bg-muted'
+            )}
+          >
+            <Icon
+              className={cn(
+                'h-5 w-5',
+                isSelected ? 'text-primary' : 'text-muted-foreground'
+              )}
+            />
+          </div>
+
+          <div className="flex-1 min-w-0 pr-6">
+            <h3 className="font-medium text-sm text-foreground">{profile.name}</h3>
+            <p className="mt-0.5 text-xs text-muted-foreground line-clamp-2">
+              {profile.description}
+            </p>
+
+            {/* Model and thinking level badges */}
+            <div className="mt-2 flex flex-wrap gap-1.5">
+              <span className="inline-flex items-center rounded bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                {getModelLabel(profile.model)}
+              </span>
+              <span className="inline-flex items-center rounded bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                {getThinkingLabel(profile.thinkingLevel)} Thinking
+              </span>
+            </div>
+          </div>
+        </div>
+      </button>
+    );
+  };
+
+  return (
+    <SettingsSection
+      title="Default Agent Profile"
+      description="Select a preset configuration for model and thinking level"
+    >
+      <div className="space-y-4">
+        {/* Description */}
+        <div className="rounded-lg bg-muted/50 p-3">
+          <p className="text-xs text-muted-foreground">
+            Agent profiles provide preset configurations for Claude model and thinking level.
+            When you create a new task, these settings will be used as defaults. You can always
+            override them in the task creation wizard.
+          </p>
+        </div>
+
+        {/* Profile cards - 2 column grid on larger screens */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+          {DEFAULT_AGENT_PROFILES.map(renderProfileCard)}
+        </div>
+
+        {/* Phase Configuration (only for Auto profile) */}
+        {selectedProfileId === 'auto' && (
+          <div className="mt-6 rounded-lg border border-border bg-card">
+            {/* Header - Collapsible */}
+            <button
+              type="button"
+              onClick={() => setShowPhaseConfig(!showPhaseConfig)}
+              className="flex w-full items-center justify-between p-4 text-left hover:bg-muted/50 transition-colors rounded-t-lg"
+            >
+              <div>
+                <h4 className="font-medium text-sm text-foreground">Phase Configuration</h4>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  Customize model and thinking level for each phase
+                </p>
+              </div>
+              {showPhaseConfig ? (
+                <ChevronUp className="h-4 w-4 text-muted-foreground" />
+              ) : (
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              )}
+            </button>
+
+            {/* Phase Configuration Content */}
+            {showPhaseConfig && (
+              <div className="border-t border-border p-4 space-y-4">
+                {/* Reset button */}
+                {hasCustomConfig() && (
+                  <div className="flex justify-end">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleResetToDefaults}
+                      className="text-xs h-7"
+                    >
+                      <RotateCcw className="h-3 w-3 mr-1.5" />
+                      Reset to defaults
+                    </Button>
+                  </div>
+                )}
+
+                {/* Phase Configuration Grid */}
+                <div className="space-y-4">
+                  {(Object.keys(PHASE_LABELS) as Array<keyof PhaseModelConfig>).map((phase) => (
+                    <div key={phase} className="space-y-2">
+                      <div className="flex items-center justify-between">
+                        <Label className="text-sm font-medium text-foreground">
+                          {PHASE_LABELS[phase].label}
+                        </Label>
+                        <span className="text-xs text-muted-foreground">
+                          {PHASE_LABELS[phase].description}
+                        </span>
+                      </div>
+                      <div className="grid grid-cols-2 gap-3">
+                        {/* Model Select */}
+                        <div className="space-y-1">
+                          <Label className="text-xs text-muted-foreground">Model</Label>
+                          <Select
+                            value={currentPhaseModels[phase]}
+                            onValueChange={(value) => handlePhaseModelChange(phase, value as ModelTypeShort)}
+                          >
+                            <SelectTrigger className="h-9">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {AVAILABLE_MODELS.map((m) => (
+                                <SelectItem key={m.value} value={m.value}>
+                                  {m.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        {/* Thinking Level Select */}
+                        <div className="space-y-1">
+                          <Label className="text-xs text-muted-foreground">Thinking Level</Label>
+                          <Select
+                            value={currentPhaseThinking[phase]}
+                            onValueChange={(value) => handlePhaseThinkingChange(phase, value as ThinkingLevel)}
+                          >
+                            <SelectTrigger className="h-9">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {THINKING_LEVELS.map((level) => (
+                                <SelectItem key={level.value} value={level.value}>
+                                  {level.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Info note */}
+                <p className="text-[10px] text-muted-foreground mt-4 pt-3 border-t border-border">
+                  These settings will be used as defaults when creating new tasks with the Auto profile.
+                  You can override them per-task in the task creation wizard.
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+
+      </div>
+    </SettingsSection>
+  );
+}
@@ -77,7 +77,7 @@ const projectNavItems: NavItem<ProjectSettingsSection>[] = [
 * Coordinates app and project settings sections
 */
 export function AppSettingsDialog({ open, onOpenChange, initialSection, initialProjectSection, onRerunWizard }: AppSettingsDialogProps) {
-  const { settings, setSettings, isSaving, error, saveSettings } = useSettings();
+  const { settings, setSettings, isSaving, error, saveSettings, revertTheme, commitTheme } = useSettings();
  const [version, setVersion] = useState<string>('');

  // Track which top-level section is active
@@ -138,10 +138,17 @@ export function AppSettingsDialog({ open, onOpenChange, initialSection, initialP
    }

    if (appSaveSuccess) {
+      // Commit the theme so future cancels won't revert to old values
+      commitTheme();
      onOpenChange(false);
    }
  };

+  const handleCancel = () => {
+    // onOpenChange handler will revert theme changes
+    onOpenChange(false);
+  };
+
  const handleProjectChange = (projectId: string | null) => {
    selectProject(projectId);
  };
@@ -183,7 +190,14 @@ export function AppSettingsDialog({ open, onOpenChange, initialSection, initialP
  const projectNavDisabled = !selectedProjectId;

  return (
-    <FullScreenDialog open={open} onOpenChange={onOpenChange}>
+    <FullScreenDialog open={open} onOpenChange={(newOpen) => {
+      if (!newOpen) {
+        // Dialog is being closed (via X, escape, or overlay click)
+        // Revert any unsaved theme changes
+        revertTheme();
+      }
+      onOpenChange(newOpen);
+    }}>
      <FullScreenDialogContent>
        <FullScreenDialogHeader>
          <FullScreenDialogTitle className="flex items-center gap-3">
@@ -332,7 +346,7 @@ export function AppSettingsDialog({ open, onOpenChange, initialSection, initialP
              {error || projectError}
            </div>
          )}
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
+          <Button variant="outline" onClick={handleCancel}>
            Cancel
          </Button>
          <Button
@@ -3,8 +3,15 @@ import { Input } from '../ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
 import { Switch } from '../ui/switch';
 import { SettingsSection } from './SettingsSection';
-import { AVAILABLE_MODELS } from '../../../shared/constants';
-import type { AppSettings } from '../../../shared/types';
+import { AgentProfileSettings } from './AgentProfileSettings';
+import {
+  AVAILABLE_MODELS,
+  THINKING_LEVELS,
+  DEFAULT_FEATURE_MODELS,
+  DEFAULT_FEATURE_THINKING,
+  FEATURE_LABELS
+} from '../../../shared/constants';
+import type { AppSettings, FeatureModelConfig, FeatureThinkingConfig, ModelTypeShort, ThinkingLevel } from '../../../shared/types';

 interface GeneralSettingsProps {
  settings: AppSettings;
@@ -18,64 +25,125 @@ interface GeneralSettingsProps {
 export function GeneralSettings({ settings, onSettingsChange, section }: GeneralSettingsProps) {
  if (section === 'agent') {
    return (
-      <SettingsSection
-        title="Default Agent Settings"
-        description="Configure defaults for new projects"
-      >
-        <div className="space-y-6">
-          <div className="space-y-3">
-            <Label htmlFor="defaultModel" className="text-sm font-medium text-foreground">Default Model</Label>
-            <p className="text-sm text-muted-foreground">The AI model used for agent tasks</p>
-            <Select
-              value={settings.defaultModel}
-              onValueChange={(value) => onSettingsChange({ ...settings, defaultModel: value })}
-            >
-              <SelectTrigger id="defaultModel" className="w-full max-w-md">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {AVAILABLE_MODELS.map((model) => (
-                  <SelectItem key={model.value} value={model.value}>
-                    {model.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-3">
-            <Label htmlFor="agentFramework" className="text-sm font-medium text-foreground">Agent Framework</Label>
-            <p className="text-sm text-muted-foreground">The coding framework used for autonomous tasks</p>
-            <Select
-              value={settings.agentFramework}
-              onValueChange={(value) => onSettingsChange({ ...settings, agentFramework: value })}
-            >
-              <SelectTrigger id="agentFramework" className="w-full max-w-md">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="auto-claude">Auto Claude</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-3">
-            <div className="flex items-center justify-between max-w-md">
+      <div className="space-y-8">
+        {/* Agent Profile Selection */}
+        <AgentProfileSettings />
+
+        {/* Other Agent Settings */}
+        <SettingsSection
+          title="Other Agent Settings"
+          description="Additional agent configuration options"
+        >
+          <div className="space-y-6">
+            <div className="space-y-3">
+              <Label htmlFor="agentFramework" className="text-sm font-medium text-foreground">Agent Framework</Label>
+              <p className="text-sm text-muted-foreground">The coding framework used for autonomous tasks</p>
+              <Select
+                value={settings.agentFramework}
+                onValueChange={(value) => onSettingsChange({ ...settings, agentFramework: value })}
+              >
+                <SelectTrigger id="agentFramework" className="w-full max-w-md">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="auto-claude">Auto Claude</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-3">
+              <div className="flex items-center justify-between max-w-md">
+                <div className="space-y-1">
+                  <Label htmlFor="autoNameTerminals" className="text-sm font-medium text-foreground">
+                    AI Terminal Naming
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    Automatically name terminals based on commands (uses Haiku)
+                  </p>
+                </div>
+                <Switch
+                  id="autoNameTerminals"
+                  checked={settings.autoNameTerminals}
+                  onCheckedChange={(checked) => onSettingsChange({ ...settings, autoNameTerminals: checked })}
+                />
+              </div>
+            </div>
+
+            {/* Feature Model Configuration */}
+            <div className="space-y-4 pt-4 border-t border-border">
              <div className="space-y-1">
-                <Label htmlFor="autoNameTerminals" className="text-sm font-medium text-foreground">
-                  AI Terminal Naming
-                </Label>
+                <Label className="text-sm font-medium text-foreground">Feature Model Settings</Label>
                <p className="text-sm text-muted-foreground">
-                  Automatically name terminals based on commands (uses Haiku)
+                  Model and thinking level for Insights, Ideation, and Roadmap
                </p>
              </div>
-              <Switch
-                id="autoNameTerminals"
-                checked={settings.autoNameTerminals}
-                onCheckedChange={(checked) => onSettingsChange({ ...settings, autoNameTerminals: checked })}
-              />
+
+              {(Object.keys(FEATURE_LABELS) as Array<keyof FeatureModelConfig>).map((feature) => {
+                const featureModels = settings.featureModels || DEFAULT_FEATURE_MODELS;
+                const featureThinking = settings.featureThinking || DEFAULT_FEATURE_THINKING;
+
+                return (
+                  <div key={feature} className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-sm font-medium text-foreground">
+                        {FEATURE_LABELS[feature].label}
+                      </Label>
+                      <span className="text-xs text-muted-foreground">
+                        {FEATURE_LABELS[feature].description}
+                      </span>
+                    </div>
+                    <div className="grid grid-cols-2 gap-3 max-w-md">
+                      {/* Model Select */}
+                      <div className="space-y-1">
+                        <Label className="text-xs text-muted-foreground">Model</Label>
+                        <Select
+                          value={featureModels[feature]}
+                          onValueChange={(value) => {
+                            const newFeatureModels = { ...featureModels, [feature]: value as ModelTypeShort };
+                            onSettingsChange({ ...settings, featureModels: newFeatureModels });
+                          }}
+                        >
+                          <SelectTrigger className="h-9">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {AVAILABLE_MODELS.map((m) => (
+                              <SelectItem key={m.value} value={m.value}>
+                                {m.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      {/* Thinking Level Select */}
+                      <div className="space-y-1">
+                        <Label className="text-xs text-muted-foreground">Thinking Level</Label>
+                        <Select
+                          value={featureThinking[feature]}
+                          onValueChange={(value) => {
+                            const newFeatureThinking = { ...featureThinking, [feature]: value as ThinkingLevel };
+                            onSettingsChange({ ...settings, featureThinking: newFeatureThinking });
+                          }}
+                        >
+                          <SelectTrigger className="h-9">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {THINKING_LEVELS.map((level) => (
+                              <SelectItem key={level.value} value={level.value}>
+                                {level.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
            </div>
          </div>
-        </div>
-      </SettingsSection>
+        </SettingsSection>
+      </div>
    );
  }

@@ -0,0 +1,138 @@
+import { Check, Sun, Moon, Monitor } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { Label } from '../ui/label';
+import { COLOR_THEMES } from '../../../shared/constants';
+import { useSettingsStore } from '../../stores/settings-store';
+import type { ColorTheme, AppSettings } from '../../../shared/types';
+
+interface ThemeSelectorProps {
+  settings: AppSettings;
+  onSettingsChange: (settings: AppSettings) => void;
+}
+
+/**
+ * Theme selector component displaying a grid of theme cards with preview swatches
+ * and a 3-option mode toggle (Light/Dark/System)
+ *
+ * Theme changes are applied immediately for live preview, while other settings
+ * require saving to take effect.
+ */
+export function ThemeSelector({ settings, onSettingsChange }: ThemeSelectorProps) {
+  const updateStoreSettings = useSettingsStore((state) => state.updateSettings);
+
+  const currentColorTheme = settings.colorTheme || 'default';
+  const currentMode = settings.theme;
+  const isDark = currentMode === 'dark' ||
+    (currentMode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+  const handleColorThemeChange = (themeId: ColorTheme) => {
+    // Update local draft state
+    onSettingsChange({ ...settings, colorTheme: themeId });
+    // Apply immediately to store for live preview (triggers App.tsx useEffect)
+    updateStoreSettings({ colorTheme: themeId });
+  };
+
+  const handleModeChange = (mode: 'light' | 'dark' | 'system') => {
+    // Update local draft state
+    onSettingsChange({ ...settings, theme: mode });
+    // Apply immediately to store for live preview (triggers App.tsx useEffect)
+    updateStoreSettings({ theme: mode });
+  };
+
+  const getModeIcon = (mode: string) => {
+    switch (mode) {
+      case 'light':
+        return <Sun className="h-4 w-4" />;
+      case 'dark':
+        return <Moon className="h-4 w-4" />;
+      default:
+        return <Monitor className="h-4 w-4" />;
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Mode Toggle */}
+      <div className="space-y-3">
+        <Label className="text-sm font-medium text-foreground">Appearance Mode</Label>
+        <p className="text-sm text-muted-foreground">Choose light, dark, or system preference</p>
+        <div className="grid grid-cols-3 gap-3 max-w-md pt-1">
+          {(['system', 'light', 'dark'] as const).map((mode) => (
+            <button
+              key={mode}
+              onClick={() => handleModeChange(mode)}
+              className={cn(
+                'flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                currentMode === mode
+                  ? 'border-primary bg-primary/5'
+                  : 'border-border hover:border-primary/50 hover:bg-accent/50'
+              )}
+            >
+              {getModeIcon(mode)}
+              <span className="text-sm font-medium capitalize">{mode}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Color Theme Grid */}
+      <div className="space-y-3">
+        <Label className="text-sm font-medium text-foreground">Color Theme</Label>
+        <p className="text-sm text-muted-foreground">Select a color palette for the interface</p>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 pt-1">
+          {COLOR_THEMES.map((theme) => {
+            const isSelected = currentColorTheme === theme.id;
+            const bgColor = isDark ? theme.previewColors.darkBg : theme.previewColors.bg;
+            const accentColor = isDark
+              ? (theme.previewColors.darkAccent || theme.previewColors.accent)
+              : theme.previewColors.accent;
+
+            return (
+              <button
+                key={theme.id}
+                onClick={() => handleColorThemeChange(theme.id)}
+                className={cn(
+                  'relative flex flex-col p-4 rounded-lg border-2 text-left transition-all',
+                  'hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                  isSelected
+                    ? 'border-primary bg-primary/5 shadow-sm'
+                    : 'border-border hover:border-primary/50 hover:bg-accent/30'
+                )}
+              >
+                {/* Selection indicator */}
+                {isSelected && (
+                  <div className="absolute top-2 right-2 w-5 h-5 rounded-full bg-primary flex items-center justify-center">
+                    <Check className="w-3 h-3 text-primary-foreground" />
+                  </div>
+                )}
+
+                {/* Preview swatches */}
+                <div className="flex items-center gap-2 mb-3">
+                  <div className="flex -space-x-1.5">
+                    <div
+                      className="w-6 h-6 rounded-full border-2 border-background shadow-sm"
+                      style={{ backgroundColor: bgColor }}
+                      title="Background color"
+                    />
+                    <div
+                      className="w-6 h-6 rounded-full border-2 border-background shadow-sm"
+                      style={{ backgroundColor: accentColor }}
+                      title="Accent color"
+                    />
+                  </div>
+                </div>
+
+                {/* Theme info */}
+                <div className="space-y-1">
+                  <p className="font-medium text-sm text-foreground">{theme.name}</p>
+                  <p className="text-xs text-muted-foreground line-clamp-2">{theme.description}</p>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -1,7 +1,5 @@
-import { Sun, Moon, Monitor } from 'lucide-react';
-import { Label } from '../ui/label';
-import { cn } from '../../lib/utils';
 import { SettingsSection } from './SettingsSection';
+import { ThemeSelector } from './ThemeSelector';
 import type { AppSettings } from '../../../shared/types';

 interface ThemeSettingsProps {
@@ -11,47 +9,15 @@ interface ThemeSettingsProps {

 /**
 * Theme and appearance settings section
+ * Wraps the ThemeSelector component with a consistent settings section layout
 */
 export function ThemeSettings({ settings, onSettingsChange }: ThemeSettingsProps) {
-  const getThemeIcon = (theme: string) => {
-    switch (theme) {
-      case 'light':
-        return <Sun className="h-4 w-4" />;
-      case 'dark':
-        return <Moon className="h-4 w-4" />;
-      default:
-        return <Monitor className="h-4 w-4" />;
-    }
-  };
-
  return (
    <SettingsSection
      title="Appearance"
      description="Customize how Auto Claude looks"
    >
-      <div className="space-y-4">
-        <div className="space-y-3">
-          <Label htmlFor="theme" className="text-sm font-medium text-foreground">Theme</Label>
-          <p className="text-sm text-muted-foreground">Choose your preferred color scheme</p>
-          <div className="grid grid-cols-3 gap-3">
-            {(['system', 'light', 'dark'] as const).map((theme) => (
-              <button
-                key={theme}
-                onClick={() => onSettingsChange({ ...settings, theme })}
-                className={cn(
-                  'flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all',
-                  settings.theme === theme
-                    ? 'border-primary bg-primary/5'
-                    : 'border-border hover:border-primary/50 hover:bg-accent/50'
-                )}
-              >
-                {getThemeIcon(theme)}
-                <span className="text-sm font-medium capitalize">{theme}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
+      <ThemeSelector settings={settings} onSettingsChange={onSettingsChange} />
    </SettingsSection>
  );
 }
@@ -1,25 +1,41 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { useSettingsStore, saveSettings as saveSettingsToStore, loadSettings as loadSettingsFromStore } from '../../../stores/settings-store';
 import type { AppSettings } from '../../../../shared/types';

 /**
 * Custom hook for managing application settings
 * Provides state management and save/load functionality
+ *
+ * Theme changes are applied immediately for live preview. If the user cancels
+ * without saving, call revertTheme() to restore the original theme.
 */
 export function useSettings() {
  const currentSettings = useSettingsStore((state) => state.settings);
+  const updateStoreSettings = useSettingsStore((state) => state.updateSettings);
  const [settings, setSettings] = useState<AppSettings>(currentSettings);
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

+  // Store the original theme settings when the hook mounts (dialog opens)
+  // This allows us to revert if the user cancels
+  const originalThemeRef = useRef<{ theme: AppSettings['theme']; colorTheme: AppSettings['colorTheme'] }>({
+    theme: currentSettings.theme,
+    colorTheme: currentSettings.colorTheme
+  });
+
  // Sync with store
  useEffect(() => {
    setSettings(currentSettings);
  }, [currentSettings]);

-  // Load settings on mount
+  // Load settings on mount and capture original theme
  useEffect(() => {
    loadSettingsFromStore();
+    // Update the original theme ref when settings load
+    originalThemeRef.current = {
+      theme: currentSettings.theme,
+      colorTheme: currentSettings.colorTheme
+    };
  }, []);

  const saveSettings = async () => {
@@ -63,6 +79,29 @@ export function useSettings() {
    setSettings((prev) => ({ ...prev, ...partial }));
  };

+  /**
+   * Revert theme to the original values (before any preview changes).
+   * Call this when the user cancels the settings dialog without saving.
+   */
+  const revertTheme = useCallback(() => {
+    const original = originalThemeRef.current;
+    updateStoreSettings({
+      theme: original.theme,
+      colorTheme: original.colorTheme
+    });
+  }, [updateStoreSettings]);
+
+  /**
+   * Capture the current theme as the new "original" after successful save.
+   * This updates the reference point for future reverts.
+   */
+  const commitTheme = useCallback(() => {
+    originalThemeRef.current = {
+      theme: settings.theme,
+      colorTheme: settings.colorTheme
+    };
+  }, [settings.theme, settings.colorTheme]);
+
  return {
    settings,
    setSettings,
@@ -70,6 +109,8 @@ export function useSettings() {
    isSaving,
    error,
    saveSettings,
-    applyTheme
+    applyTheme,
+    revertTheme,
+    commitTheme
  };
 }
@@ -5,6 +5,7 @@

 export { AppSettingsDialog, type AppSection } from './AppSettings';
 export { ThemeSettings } from './ThemeSettings';
+export { ThemeSelector } from './ThemeSelector';
 export { GeneralSettings } from './GeneralSettings';
 export { IntegrationSettings } from './IntegrationSettings';
 export { AdvancedSettings } from './AdvancedSettings';
@@ -0,0 +1,520 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Separator } from '../ui/separator';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+import { ScrollArea } from '../ui/scroll-area';
+import { TooltipProvider } from '../ui/tooltip';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { Progress } from '../ui/progress';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../ui/alert-dialog';
+import {
+  Play,
+  Square,
+  CheckCircle2,
+  RotateCcw,
+  Trash2,
+  Loader2,
+  AlertTriangle,
+  Pencil,
+  X
+} from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { calculateProgress } from '../../lib/utils';
+import { startTask, stopTask, submitReview, recoverStuckTask, deleteTask } from '../../stores/task-store';
+import { TASK_STATUS_LABELS } from '../../../shared/constants';
+import { TaskEditDialog } from '../TaskEditDialog';
+import { useTaskDetail } from './hooks/useTaskDetail';
+import { TaskMetadata } from './TaskMetadata';
+import { TaskWarnings } from './TaskWarnings';
+import { TaskSubtasks } from './TaskSubtasks';
+import { TaskLogs } from './TaskLogs';
+import { TaskReview } from './TaskReview';
+import type { Task } from '../../../shared/types';
+
+interface TaskDetailModalProps {
+  open: boolean;
+  task: Task | null;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function TaskDetailModal({ open, task, onOpenChange }: TaskDetailModalProps) {
+  // Don't render anything if no task
+  if (!task) {
+    return null;
+  }
+
+  return (
+    <TaskDetailModalContent
+      open={open}
+      task={task}
+      onOpenChange={onOpenChange}
+    />
+  );
+}
+
+// Separate component to use hooks only when task exists
+function TaskDetailModalContent({ open, task, onOpenChange }: { open: boolean; task: Task; onOpenChange: (open: boolean) => void }) {
+  const state = useTaskDetail({ task });
+  const progressPercent = calculateProgress(task.subtasks);
+  const completedSubtasks = task.subtasks.filter(s => s.status === 'completed').length;
+  const totalSubtasks = task.subtasks.length;
+
+  // Event Handlers
+  const handleStartStop = () => {
+    if (state.isRunning && !state.isStuck) {
+      stopTask(task.id);
+    } else {
+      startTask(task.id);
+    }
+  };
+
+  const handleRecover = async () => {
+    state.setIsRecovering(true);
+    const result = await recoverStuckTask(task.id, { autoRestart: true });
+    if (result.success) {
+      state.setIsStuck(false);
+      state.setHasCheckedRunning(false);
+    }
+    state.setIsRecovering(false);
+  };
+
+  const handleReject = async () => {
+    if (!state.feedback.trim()) {
+      return;
+    }
+    state.setIsSubmitting(true);
+    await submitReview(task.id, false, state.feedback);
+    state.setIsSubmitting(false);
+    state.setFeedback('');
+  };
+
+  const handleDelete = async () => {
+    state.setIsDeleting(true);
+    state.setDeleteError(null);
+    const result = await deleteTask(task.id);
+    if (result.success) {
+      state.setShowDeleteDialog(false);
+      onOpenChange(false);
+    } else {
+      state.setDeleteError(result.error || 'Failed to delete task');
+    }
+    state.setIsDeleting(false);
+  };
+
+  const handleMerge = async () => {
+    state.setIsMerging(true);
+    state.setWorkspaceError(null);
+    try {
+      const result = await window.electronAPI.mergeWorktree(task.id, { noCommit: state.stageOnly });
+      if (result.success && result.data?.success) {
+        if (state.stageOnly && result.data.staged) {
+          state.setWorkspaceError(null);
+          state.setStagedSuccess(result.data.message || 'Changes staged in main project');
+          state.setStagedProjectPath(result.data.projectPath);
+          state.setSuggestedCommitMessage(result.data.suggestedCommitMessage);
+        } else {
+          onOpenChange(false);
+        }
+      } else {
+        state.setWorkspaceError(result.data?.message || result.error || 'Failed to merge changes');
+      }
+    } catch (error) {
+      state.setWorkspaceError(error instanceof Error ? error.message : 'Unknown error during merge');
+    } finally {
+      state.setIsMerging(false);
+    }
+  };
+
+  const handleDiscard = async () => {
+    state.setIsDiscarding(true);
+    state.setWorkspaceError(null);
+    const result = await window.electronAPI.discardWorktree(task.id);
+    if (result.success && result.data?.success) {
+      state.setShowDiscardDialog(false);
+      onOpenChange(false);
+    } else {
+      state.setWorkspaceError(result.data?.message || result.error || 'Failed to discard changes');
+    }
+    state.setIsDiscarding(false);
+  };
+
+  const handleClose = () => {
+    onOpenChange(false);
+  };
+
+  // Render primary action button based on state
+  const renderPrimaryAction = () => {
+    if (state.isStuck) {
+      return (
+        <Button
+          variant="warning"
+          onClick={handleRecover}
+          disabled={state.isRecovering}
+        >
+          {state.isRecovering ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Recovering...
+            </>
+          ) : (
+            <>
+              <RotateCcw className="mr-2 h-4 w-4" />
+              Recover Task
+            </>
+          )}
+        </Button>
+      );
+    }
+
+    if (state.isIncomplete) {
+      return (
+        <Button variant="default" onClick={handleStartStop}>
+          <Play className="mr-2 h-4 w-4" />
+          Resume Task
+        </Button>
+      );
+    }
+
+    if (task.status === 'backlog' || task.status === 'in_progress') {
+      return (
+        <Button
+          variant={state.isRunning ? 'destructive' : 'default'}
+          onClick={handleStartStop}
+        >
+          {state.isRunning ? (
+            <>
+              <Square className="mr-2 h-4 w-4" />
+              Stop Task
+            </>
+          ) : (
+            <>
+              <Play className="mr-2 h-4 w-4" />
+              Start Task
+            </>
+          )}
+        </Button>
+      );
+    }
+
+    if (task.status === 'done') {
+      return (
+        <div className="completion-state text-sm flex items-center gap-2 text-success">
+          <CheckCircle2 className="h-5 w-5" />
+          <span className="font-medium">Task completed</span>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+        <DialogPrimitive.Portal>
+          {/* Semi-transparent overlay - can see background content */}
+          <DialogPrimitive.Overlay
+            className={cn(
+              'fixed inset-0 z-50 bg-black/60',
+              'data-[state=open]:animate-in data-[state=closed]:animate-out',
+              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'
+            )}
+          />
+
+          {/* Full-height centered modal content */}
+          <DialogPrimitive.Content
+            className={cn(
+              'fixed left-[50%] top-4 z-50',
+              'translate-x-[-50%]',
+              'w-[95vw] max-w-5xl h-[calc(100vh-32px)]',
+              'bg-card border border-border rounded-xl',
+              'shadow-2xl overflow-hidden flex flex-col',
+              'data-[state=open]:animate-in data-[state=closed]:animate-out',
+              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+              'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+              'duration-200'
+            )}
+          >
+            {/* Header */}
+            <div className="p-5 pb-4 border-b border-border shrink-0">
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                  <DialogPrimitive.Title className="text-xl font-semibold leading-tight text-foreground pr-4">
+                    {task.title}
+                  </DialogPrimitive.Title>
+                  <DialogPrimitive.Description asChild>
+                    <div className="mt-2.5 flex items-center gap-2 flex-wrap">
+                      <Badge variant="outline" className="text-xs font-mono">
+                        {task.specId}
+                      </Badge>
+                      {state.isStuck ? (
+                        <Badge variant="warning" className="text-xs flex items-center gap-1 animate-pulse">
+                          <AlertTriangle className="h-3 w-3" />
+                          Stuck
+                        </Badge>
+                      ) : state.isIncomplete ? (
+                        <>
+                          <Badge variant="warning" className="text-xs flex items-center gap-1">
+                            <AlertTriangle className="h-3 w-3" />
+                            Incomplete
+                          </Badge>
+                        </>
+                      ) : (
+                        <>
+                          <Badge
+                            variant={task.status === 'done' ? 'success' : task.status === 'human_review' ? 'purple' : task.status === 'in_progress' ? 'info' : 'secondary'}
+                            className={cn('text-xs', (task.status === 'in_progress' && !state.isStuck) && 'status-running')}
+                          >
+                            {TASK_STATUS_LABELS[task.status]}
+                          </Badge>
+                          {task.status === 'human_review' && task.reviewReason && (
+                            <Badge
+                              variant={task.reviewReason === 'completed' ? 'success' : task.reviewReason === 'errors' ? 'destructive' : 'warning'}
+                              className="text-xs"
+                            >
+                              {task.reviewReason === 'completed' ? 'Completed' :
+                               task.reviewReason === 'errors' ? 'Has Errors' :
+                               task.reviewReason === 'plan_review' ? 'Approve Plan' : 'QA Issues'}
+                            </Badge>
+                          )}
+                        </>
+                      )}
+                      {/* Compact progress indicator */}
+                      {totalSubtasks > 0 && (
+                        <span className="text-xs text-muted-foreground ml-1">
+                          {completedSubtasks}/{totalSubtasks} subtasks
+                        </span>
+                      )}
+                    </div>
+                  </DialogPrimitive.Description>
+                </div>
+                <div className="flex items-center gap-1 shrink-0">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="hover:bg-primary/10 hover:text-primary transition-colors"
+                    onClick={() => state.setIsEditDialogOpen(true)}
+                    disabled={state.isRunning && !state.isStuck}
+                  >
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                  <DialogPrimitive.Close asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="hover:bg-muted transition-colors"
+                    >
+                      <X className="h-5 w-5" />
+                      <span className="sr-only">Close</span>
+                    </Button>
+                  </DialogPrimitive.Close>
+                </div>
+              </div>
+
+              {/* Progress bar - only show when running or has progress */}
+              {(state.isRunning || completedSubtasks > 0) && totalSubtasks > 0 && (
+                <div className="mt-3 flex items-center gap-3">
+                  <Progress value={progressPercent} className="h-1.5 flex-1" />
+                  <span className="text-xs text-muted-foreground tabular-nums w-10 text-right">{progressPercent}%</span>
+                </div>
+              )}
+
+              {/* Warnings - compact inline */}
+              {(state.isStuck || state.isIncomplete) && (
+                <div className="mt-3">
+                  <TaskWarnings
+                    isStuck={state.isStuck}
+                    isIncomplete={state.isIncomplete}
+                    isRecovering={state.isRecovering}
+                    taskProgress={state.taskProgress}
+                    onRecover={handleRecover}
+                    onResume={handleStartStop}
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Body - Single Column with Tabs */}
+            <div className="flex-1 min-h-0 overflow-hidden">
+              <Tabs value={state.activeTab} onValueChange={state.setActiveTab} className="flex flex-col h-full">
+                <TabsList className="w-full justify-start rounded-none border-b border-border bg-transparent px-5 h-auto shrink-0">
+                  <TabsTrigger
+                    value="overview"
+                    className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-sm"
+                  >
+                    Overview
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="subtasks"
+                    className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-sm"
+                  >
+                    Subtasks ({task.subtasks.length})
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="logs"
+                    className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2.5 text-sm"
+                  >
+                    Logs
+                  </TabsTrigger>
+                </TabsList>
+
+                {/* Overview Tab */}
+                <TabsContent value="overview" className="flex-1 min-h-0 overflow-hidden mt-0">
+                  <ScrollArea className="h-full">
+                    <div className="p-5 space-y-5">
+                      {/* Metadata */}
+                      <TaskMetadata task={task} />
+
+                      {/* Human Review Section */}
+                      {state.needsReview && (
+                        <>
+                          <Separator />
+                          <TaskReview
+                            task={task}
+                            feedback={state.feedback}
+                            isSubmitting={state.isSubmitting}
+                            worktreeStatus={state.worktreeStatus}
+                            worktreeDiff={state.worktreeDiff}
+                            isLoadingWorktree={state.isLoadingWorktree}
+                            isMerging={state.isMerging}
+                            isDiscarding={state.isDiscarding}
+                            showDiscardDialog={state.showDiscardDialog}
+                            showDiffDialog={state.showDiffDialog}
+                            workspaceError={state.workspaceError}
+                            stageOnly={state.stageOnly}
+                            stagedSuccess={state.stagedSuccess}
+                            stagedProjectPath={state.stagedProjectPath}
+                            suggestedCommitMessage={state.suggestedCommitMessage}
+                            mergePreview={state.mergePreview}
+                            isLoadingPreview={state.isLoadingPreview}
+                            showConflictDialog={state.showConflictDialog}
+                            onFeedbackChange={state.setFeedback}
+                            onReject={handleReject}
+                            onMerge={handleMerge}
+                            onDiscard={handleDiscard}
+                            onShowDiscardDialog={state.setShowDiscardDialog}
+                            onShowDiffDialog={state.setShowDiffDialog}
+                            onStageOnlyChange={state.setStageOnly}
+                            onShowConflictDialog={state.setShowConflictDialog}
+                            onLoadMergePreview={state.loadMergePreview}
+                            onClose={handleClose}
+                          />
+                        </>
+                      )}
+                    </div>
+                  </ScrollArea>
+                </TabsContent>
+
+                {/* Subtasks Tab */}
+                <TabsContent value="subtasks" className="flex-1 min-h-0 overflow-hidden mt-0">
+                  <TaskSubtasks task={task} />
+                </TabsContent>
+
+                {/* Logs Tab */}
+                <TabsContent value="logs" className="flex-1 min-h-0 overflow-hidden mt-0">
+                  <TaskLogs
+                    task={task}
+                    phaseLogs={state.phaseLogs}
+                    isLoadingLogs={state.isLoadingLogs}
+                    expandedPhases={state.expandedPhases}
+                    isStuck={state.isStuck}
+                    logsEndRef={state.logsEndRef}
+                    logsContainerRef={state.logsContainerRef}
+                    onLogsScroll={state.handleLogsScroll}
+                    onTogglePhase={state.togglePhase}
+                  />
+                </TabsContent>
+              </Tabs>
+            </div>
+
+            {/* Footer - Actions */}
+            <div className="flex items-center gap-3 px-5 py-3 border-t border-border shrink-0">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                onClick={() => state.setShowDeleteDialog(true)}
+                disabled={state.isRunning && !state.isStuck}
+              >
+                <Trash2 className="mr-2 h-4 w-4" />
+                Delete Task
+              </Button>
+              <div className="flex-1" />
+              {renderPrimaryAction()}
+              <Button variant="outline" onClick={handleClose}>
+                Close
+              </Button>
+            </div>
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Portal>
+      </DialogPrimitive.Root>
+
+      {/* Edit Task Dialog */}
+      <TaskEditDialog
+        task={task}
+        open={state.isEditDialogOpen}
+        onOpenChange={state.setIsEditDialogOpen}
+      />
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={state.showDeleteDialog} onOpenChange={state.setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-destructive" />
+              Delete Task
+            </AlertDialogTitle>
+            <AlertDialogDescription asChild>
+              <div className="text-sm text-muted-foreground space-y-3">
+                <p>
+                  Are you sure you want to delete <strong className="text-foreground">"{task.title}"</strong>?
+                </p>
+                <p className="text-destructive">
+                  This action cannot be undone. All task files, including the spec, implementation plan, and any generated code will be permanently deleted from the project.
+                </p>
+                {state.deleteError && (
+                  <p className="text-destructive bg-destructive/10 px-3 py-2 rounded-lg text-sm">
+                    {state.deleteError}
+                  </p>
+                )}
+              </div>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={state.isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={(e) => {
+                e.preventDefault();
+                handleDelete();
+              }}
+              disabled={state.isDeleting}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {state.isDeleting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                <>
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Delete Permanently
+                </>
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </TooltipProvider>
+  );
+}
@@ -84,6 +84,7 @@ export function TaskDetailPanel({ task, onClose }: TaskDetailPanelProps) {
          state.setWorkspaceError(null);
          state.setStagedSuccess(result.data.message || 'Changes staged in main project');
          state.setStagedProjectPath(result.data.projectPath);
+          state.setSuggestedCommitMessage(result.data.suggestedCommitMessage);
        } else {
          console.warn('[TaskDetailPanel] Full merge success, closing panel');
          onClose();
@@ -196,6 +197,7 @@ export function TaskDetailPanel({ task, onClose }: TaskDetailPanelProps) {
                    stageOnly={state.stageOnly}
                    stagedSuccess={state.stagedSuccess}
                    stagedProjectPath={state.stagedProjectPath}
+                    suggestedCommitMessage={state.suggestedCommitMessage}
                    mergePreview={state.mergePreview}
                    isLoadingPreview={state.isLoadingPreview}
                    showConflictDialog={state.showConflictDialog}
@@ -337,7 +337,7 @@ function LogEntry({ entry }: LogEntryProps) {
          <Icon className="h-3 w-3 animate-pulse" />
          <span className="font-medium">{label}</span>
          {entry.tool_input && (
-            <span className="text-muted-foreground truncate max-w-[200px]" title={entry.tool_input}>
+            <span className="text-muted-foreground truncate max-w-[500px]" title={entry.tool_input}>
              {entry.tool_input}
            </span>
          )}
@@ -1,5 +1,4 @@
 import {
-  Info,
  Target,
  Bug,
  Wrench,
@@ -47,18 +46,24 @@ interface TaskMetadataProps {
 }

 export function TaskMetadata({ task }: TaskMetadataProps) {
+  const hasClassification = task.metadata && (
+    task.metadata.category ||
+    task.metadata.priority ||
+    task.metadata.complexity ||
+    task.metadata.impact ||
+    task.metadata.securitySeverity ||
+    task.metadata.sourceType
+  );
+
  return (
    <div className="space-y-5">
-      {/* Classification Badges */}
-      {task.metadata && (
-        <div>
-          <div className="section-divider mb-3">
-            <Info className="h-3 w-3" />
-            Classification
-          </div>
-          <div className="flex flex-wrap gap-1.5">
+      {/* Compact Metadata Bar: Classification + Timeline */}
+      <div className="flex flex-wrap items-center justify-between gap-3 pb-4 border-b border-border">
+        {/* Classification Badges - Left */}
+        {hasClassification && (
+          <div className="flex flex-wrap items-center gap-1.5">
            {/* Category */}
-            {task.metadata.category && (
+            {task.metadata?.category && (
              <Badge
                variant="outline"
                className={cn('text-xs', TASK_CATEGORY_COLORS[task.metadata.category])}
@@ -71,7 +76,7 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
              </Badge>
            )}
            {/* Priority */}
-            {task.metadata.priority && (
+            {task.metadata?.priority && (
              <Badge
                variant="outline"
                className={cn('text-xs', TASK_PRIORITY_COLORS[task.metadata.priority])}
@@ -80,7 +85,7 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
              </Badge>
            )}
            {/* Complexity */}
-            {task.metadata.complexity && (
+            {task.metadata?.complexity && (
              <Badge
                variant="outline"
                className={cn('text-xs', TASK_COMPLEXITY_COLORS[task.metadata.complexity])}
@@ -89,7 +94,7 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
              </Badge>
            )}
            {/* Impact */}
-            {task.metadata.impact && (
+            {task.metadata?.impact && (
              <Badge
                variant="outline"
                className={cn('text-xs', TASK_IMPACT_COLORS[task.metadata.impact])}
@@ -98,17 +103,17 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
              </Badge>
            )}
            {/* Security Severity */}
-            {task.metadata.securitySeverity && (
+            {task.metadata?.securitySeverity && (
              <Badge
                variant="outline"
                className={cn('text-xs', TASK_IMPACT_COLORS[task.metadata.securitySeverity])}
              >
                <Shield className="h-3 w-3 mr-1" />
-                {task.metadata.securitySeverity} severity
+                {task.metadata.securitySeverity}
              </Badge>
            )}
            {/* Source Type */}
-            {task.metadata.sourceType && (
+            {task.metadata?.sourceType && (
              <Badge variant="secondary" className="text-xs">
                {task.metadata.sourceType === 'ideation' && task.metadata.ideationType
                  ? IDEATION_TYPE_LABELS[task.metadata.ideationType] || task.metadata.ideationType
@@ -116,66 +121,72 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
              </Badge>
            )}
          </div>
-        </div>
-      )}
+        )}

-      {/* Description */}
+        {/* Timeline - Right */}
+        <div className="flex items-center gap-4 text-xs text-muted-foreground">
+          <span className="flex items-center gap-1.5">
+            <Clock className="h-3 w-3" />
+            Created {formatRelativeTime(task.createdAt)}
+          </span>
+          <span className="text-border">•</span>
+          <span>Updated {formatRelativeTime(task.updatedAt)}</span>
+        </div>
+      </div>
+
+      {/* Description - Primary Content */}
      {task.description && (
        <div>
-          <div className="section-divider mb-3">
-            <FileCode className="h-3 w-3" />
-            Description
-          </div>
-          <p className="text-sm text-muted-foreground leading-relaxed">
-            {sanitizeMarkdownForDisplay(task.description, 500)}
+          <p className="text-sm text-foreground/90 leading-relaxed">
+            {sanitizeMarkdownForDisplay(task.description, 800)}
          </p>
        </div>
      )}

-      {/* Metadata Details */}
+      {/* Secondary Details */}
      {task.metadata && (
-        <div className="space-y-4">
+        <div className="space-y-4 pt-2">
          {/* Rationale */}
          {task.metadata.rationale && (
            <div>
-              <h3 className="text-sm font-medium text-foreground mb-1.5 flex items-center gap-1.5">
-                <Lightbulb className="h-3.5 w-3.5 text-warning" />
+              <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1.5 flex items-center gap-1.5">
+                <Lightbulb className="h-3 w-3 text-warning" />
                Rationale
              </h3>
-              <p className="text-sm text-muted-foreground">{task.metadata.rationale}</p>
+              <p className="text-sm text-foreground/80">{task.metadata.rationale}</p>
            </div>
          )}

          {/* Problem Solved */}
          {task.metadata.problemSolved && (
            <div>
-              <h3 className="text-sm font-medium text-foreground mb-1.5 flex items-center gap-1.5">
-                <Target className="h-3.5 w-3.5 text-success" />
+              <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1.5 flex items-center gap-1.5">
+                <Target className="h-3 w-3 text-success" />
                Problem Solved
              </h3>
-              <p className="text-sm text-muted-foreground">{task.metadata.problemSolved}</p>
+              <p className="text-sm text-foreground/80">{task.metadata.problemSolved}</p>
            </div>
          )}

          {/* Target Audience */}
          {task.metadata.targetAudience && (
            <div>
-              <h3 className="text-sm font-medium text-foreground mb-1.5 flex items-center gap-1.5">
-                <Users className="h-3.5 w-3.5 text-info" />
+              <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1.5 flex items-center gap-1.5">
+                <Users className="h-3 w-3 text-info" />
                Target Audience
              </h3>
-              <p className="text-sm text-muted-foreground">{task.metadata.targetAudience}</p>
+              <p className="text-sm text-foreground/80">{task.metadata.targetAudience}</p>
            </div>
          )}

          {/* Dependencies */}
          {task.metadata.dependencies && task.metadata.dependencies.length > 0 && (
            <div>
-              <h3 className="text-sm font-medium text-foreground mb-1.5 flex items-center gap-1.5">
-                <GitBranch className="h-3.5 w-3.5 text-purple-400" />
+              <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1.5 flex items-center gap-1.5">
+                <GitBranch className="h-3 w-3 text-purple-400" />
                Dependencies
              </h3>
-              <ul className="text-sm text-muted-foreground list-disc list-inside space-y-0.5">
+              <ul className="text-sm text-foreground/80 list-disc list-inside space-y-0.5">
                {task.metadata.dependencies.map((dep, idx) => (
                  <li key={idx}>{dep}</li>
                ))}
@@ -186,11 +197,11 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
          {/* Acceptance Criteria */}
          {task.metadata.acceptanceCriteria && task.metadata.acceptanceCriteria.length > 0 && (
            <div>
-              <h3 className="text-sm font-medium text-foreground mb-1.5 flex items-center gap-1.5">
-                <ListChecks className="h-3.5 w-3.5 text-success" />
+              <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1.5 flex items-center gap-1.5">
+                <ListChecks className="h-3 w-3 text-success" />
                Acceptance Criteria
              </h3>
-              <ul className="text-sm text-muted-foreground list-disc list-inside space-y-0.5">
+              <ul className="text-sm text-foreground/80 list-disc list-inside space-y-0.5">
                {task.metadata.acceptanceCriteria.map((criteria, idx) => (
                  <li key={idx}>{criteria}</li>
                ))}
@@ -201,8 +212,8 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
          {/* Affected Files */}
          {task.metadata.affectedFiles && task.metadata.affectedFiles.length > 0 && (
            <div>
-              <h3 className="text-sm font-medium text-foreground mb-1.5 flex items-center gap-1.5">
-                <FileCode className="h-3.5 w-3.5 text-muted-foreground" />
+              <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1.5 flex items-center gap-1.5">
+                <FileCode className="h-3 w-3" />
                Affected Files
              </h3>
              <div className="flex flex-wrap gap-1">
@@ -223,24 +234,6 @@ export function TaskMetadata({ task }: TaskMetadataProps) {
          )}
        </div>
      )}
-
-      {/* Timestamps */}
-      <div>
-        <div className="section-divider mb-3">
-          <Clock className="h-3 w-3" />
-          Timeline
-        </div>
-        <div className="space-y-2">
-          <div className="flex items-center justify-between text-sm">
-            <span className="text-muted-foreground">Created</span>
-            <span className="text-foreground tabular-nums">{formatRelativeTime(task.createdAt)}</span>
-          </div>
-          <div className="flex items-center justify-between text-sm">
-            <span className="text-muted-foreground">Updated</span>
-            <span className="text-foreground tabular-nums">{formatRelativeTime(task.updatedAt)}</span>
-          </div>
-        </div>
-      </div>
    </div>
  );
 }
@@ -26,6 +26,7 @@ interface TaskReviewProps {
  stageOnly: boolean;
  stagedSuccess: string | null;
  stagedProjectPath: string | undefined;
+  suggestedCommitMessage: string | undefined;
  mergePreview: { files: string[]; conflicts: MergeConflict[]; summary: MergeStats; gitConflicts?: GitConflictInfo; uncommittedChanges?: { hasChanges: boolean; files: string[]; count: number } | null } | null;
  isLoadingPreview: boolean;
  showConflictDialog: boolean;
@@ -38,6 +39,7 @@ interface TaskReviewProps {
  onStageOnlyChange: (value: boolean) => void;
  onShowConflictDialog: (show: boolean) => void;
  onLoadMergePreview: () => void;
+  onClose?: () => void;
 }

 /**
@@ -64,6 +66,7 @@ export function TaskReview({
  stageOnly,
  stagedSuccess,
  stagedProjectPath,
+  suggestedCommitMessage,
  mergePreview,
  isLoadingPreview,
  showConflictDialog,
@@ -75,7 +78,8 @@ export function TaskReview({
  onShowDiffDialog,
  onStageOnlyChange,
  onShowConflictDialog,
-  onLoadMergePreview
+  onLoadMergePreview,
+  onClose
 }: TaskReviewProps) {
  return (
    <div className="space-y-4">
@@ -88,6 +92,7 @@ export function TaskReview({
          stagedSuccess={stagedSuccess}
          stagedProjectPath={stagedProjectPath}
          task={task}
+          suggestedCommitMessage={suggestedCommitMessage}
        />
      )}

@@ -116,9 +121,10 @@ export function TaskReview({
          task={task}
          projectPath={stagedProjectPath}
          hasWorktree={worktreeStatus?.exists || false}
+          onClose={onClose}
        />
      ) : (
-        <NoWorkspaceMessage task={task} />
+        <NoWorkspaceMessage task={task} onClose={onClose} />
      )}

      {/* QA Feedback Section */}
@@ -30,6 +30,7 @@ export function useTaskDetail({ task }: UseTaskDetailOptions) {
  const [stageOnly, setStageOnly] = useState(task.status === 'human_review');
  const [stagedSuccess, setStagedSuccess] = useState<string | null>(null);
  const [stagedProjectPath, setStagedProjectPath] = useState<string | undefined>(undefined);
+  const [suggestedCommitMessage, setSuggestedCommitMessage] = useState<string | undefined>(undefined);
  const [phaseLogs, setPhaseLogs] = useState<TaskLogs | null>(null);
  const [isLoadingLogs, setIsLoadingLogs] = useState(false);
  const [expandedPhases, setExpandedPhases] = useState<Set<TaskLogPhase>>(new Set());
@@ -279,6 +280,7 @@ export function useTaskDetail({ task }: UseTaskDetailOptions) {
    stageOnly,
    stagedSuccess,
    stagedProjectPath,
+    suggestedCommitMessage,
    phaseLogs,
    isLoadingLogs,
    expandedPhases,
@@ -318,6 +320,7 @@ export function useTaskDetail({ task }: UseTaskDetailOptions) {
    setStageOnly,
    setStagedSuccess,
    setStagedProjectPath,
+    setSuggestedCommitMessage,
    setPhaseLogs,
    setIsLoadingLogs,
    setExpandedPhases,
@@ -1,4 +1,5 @@
 export { TaskDetailPanel } from './TaskDetailPanel';
+export { TaskDetailModal } from './TaskDetailModal';
 export { TaskHeader } from './TaskHeader';
 export { TaskProgress } from './TaskProgress';
 export { TaskMetadata } from './TaskMetadata';
@@ -1,11 +1,14 @@
-import { GitMerge, ExternalLink } from 'lucide-react';
+import { useState } from 'react';
+import { GitMerge, ExternalLink, Copy, Check, Sparkles } from 'lucide-react';
 import { Button } from '../../ui/button';
+import { Textarea } from '../../ui/textarea';
 import type { Task } from '../../../../shared/types';

 interface StagedSuccessMessageProps {
  stagedSuccess: string;
  stagedProjectPath: string | undefined;
  task: Task;
+  suggestedCommitMessage?: string;
 }

 /**
@@ -14,8 +17,23 @@ interface StagedSuccessMessageProps {
 export function StagedSuccessMessage({
  stagedSuccess,
  stagedProjectPath,
-  task
+  task,
+  suggestedCommitMessage
 }: StagedSuccessMessageProps) {
+  const [commitMessage, setCommitMessage] = useState(suggestedCommitMessage || '');
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    if (!commitMessage) return;
+    try {
+      await navigator.clipboard.writeText(commitMessage);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
  return (
    <div className="rounded-xl border border-success/30 bg-success/10 p-4">
      <h3 className="font-medium text-sm text-foreground mb-2 flex items-center gap-2">
@@ -25,6 +43,47 @@ export function StagedSuccessMessage({
      <p className="text-sm text-muted-foreground mb-3">
        {stagedSuccess}
      </p>
+
+      {/* Commit Message Section */}
+      {suggestedCommitMessage && (
+        <div className="bg-background/50 rounded-lg p-3 mb-3">
+          <div className="flex items-center justify-between mb-2">
+            <p className="text-xs text-muted-foreground flex items-center gap-1.5">
+              <Sparkles className="h-3 w-3 text-purple-400" />
+              AI-generated commit message
+            </p>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleCopy}
+              className="h-6 px-2 text-xs"
+              disabled={!commitMessage}
+            >
+              {copied ? (
+                <>
+                  <Check className="h-3 w-3 mr-1 text-success" />
+                  Copied!
+                </>
+              ) : (
+                <>
+                  <Copy className="h-3 w-3 mr-1" />
+                  Copy
+                </>
+              )}
+            </Button>
+          </div>
+          <Textarea
+            value={commitMessage}
+            onChange={(e) => setCommitMessage(e.target.value)}
+            className="font-mono text-xs min-h-[100px] bg-background/80 resize-y"
+            placeholder="Commit message..."
+          />
+          <p className="text-[10px] text-muted-foreground mt-1.5">
+            Edit as needed, then copy and use with <code className="bg-background px-1 rounded">git commit -m "..."</code>
+          </p>
+        </div>
+      )}
+
      <div className="bg-background/50 rounded-lg p-3 mb-3">
        <p className="text-xs text-muted-foreground mb-2">Next steps:</p>
        <ol className="text-xs text-muted-foreground space-y-1 list-decimal list-inside">
@@ -24,12 +24,13 @@ export function LoadingMessage({ message = 'Loading workspace info...' }: Loadin

 interface NoWorkspaceMessageProps {
  task?: Task;
+  onClose?: () => void;
 }

 /**
 * Displays message when no workspace is found for the task
 */
-export function NoWorkspaceMessage({ task }: NoWorkspaceMessageProps) {
+export function NoWorkspaceMessage({ task, onClose }: NoWorkspaceMessageProps) {
  const [isMarkingDone, setIsMarkingDone] = useState(false);

  const handleMarkDone = async () => {
@@ -38,6 +39,8 @@ export function NoWorkspaceMessage({ task }: NoWorkspaceMessageProps) {
    setIsMarkingDone(true);
    try {
      await persistTaskStatus(task.id, 'done');
+      // Auto-close modal after marking as done
+      onClose?.();
    } catch (err) {
      console.error('Error marking task as done:', err);
    } finally {
@@ -85,12 +88,13 @@ interface StagedInProjectMessageProps {
  task: Task;
  projectPath?: string;
  hasWorktree?: boolean;
+  onClose?: () => void;
 }

 /**
 * Displays message when changes have already been staged in the main project
 */
-export function StagedInProjectMessage({ task, projectPath, hasWorktree = false }: StagedInProjectMessageProps) {
+export function StagedInProjectMessage({ task, projectPath, hasWorktree = false, onClose }: StagedInProjectMessageProps) {
  const [isDeleting, setIsDeleting] = useState(false);
  const [error, setError] = useState<string | null>(null);

@@ -110,7 +114,8 @@ export function StagedInProjectMessage({ task, projectPath, hasWorktree = false
      // Mark task as done
      await persistTaskStatus(task.id, 'done');

-      // Success - the UI will update automatically via the store
+      // Auto-close modal after marking as done
+      onClose?.();
    } catch (err) {
      console.error('Error deleting worktree:', err);
      setError(err instanceof Error ? err.message : 'Failed to delete worktree');
@@ -9,10 +9,14 @@ import {
  FolderX,
  Loader2,
  RotateCcw,
-  AlertTriangle
+  AlertTriangle,
+  CheckCircle,
+  GitCommit,
+  Terminal
 } from 'lucide-react';
 import { Button } from '../../ui/button';
-import { MergePreviewSummary } from './MergePreviewSummary';
+import { Checkbox } from '../../ui/checkbox';
+import { cn } from '../../../lib/utils';
 import type { Task, WorktreeStatus, MergeConflict, MergeStats, GitConflictInfo } from '../../../../shared/types';

 interface WorkspaceStatusProps {
@@ -54,198 +58,258 @@ export function WorkspaceStatus({
  const hasGitConflicts = mergePreview?.gitConflicts?.hasConflicts;
  const hasUncommittedChanges = mergePreview?.uncommittedChanges?.hasChanges;
  const uncommittedCount = mergePreview?.uncommittedChanges?.count || 0;
+  const hasAIConflicts = mergePreview && mergePreview.conflicts.length > 0;
+
+  // Determine overall status
+  const statusColor = hasGitConflicts
+    ? 'warning'
+    : hasUncommittedChanges
+      ? 'warning'
+      : mergePreview && !hasAIConflicts
+        ? 'success'
+        : 'info';

  return (
-    <div className="review-section-highlight">
-      <h3 className="font-medium text-sm text-foreground mb-3 flex items-center gap-2">
-        <GitBranch className="h-4 w-4 text-purple-400" />
-        Build Ready for Review
-      </h3>
-
-      {/* Change Summary */}
-      <div className="bg-background/50 rounded-lg p-3 mb-3">
-        <div className="grid grid-cols-2 gap-2 text-sm">
-          <div className="flex items-center gap-2">
-            <FileCode className="h-4 w-4 text-muted-foreground" />
-            <span className="text-muted-foreground">Files changed:</span>
-            <span className="text-foreground font-medium">{worktreeStatus.filesChanged || 0}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <GitBranch className="h-4 w-4 text-muted-foreground" />
-            <span className="text-muted-foreground">Commits:</span>
-            <span className="text-foreground font-medium">{worktreeStatus.commitCount || 0}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <Plus className="h-4 w-4 text-success" />
-            <span className="text-muted-foreground">Additions:</span>
-            <span className="text-success font-medium">+{worktreeStatus.additions || 0}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <Minus className="h-4 w-4 text-destructive" />
-            <span className="text-muted-foreground">Deletions:</span>
-            <span className="text-destructive font-medium">-{worktreeStatus.deletions || 0}</span>
+    <div className="rounded-xl border border-border bg-card overflow-hidden">
+      {/* Header with stats */}
+      <div className="px-4 py-3 bg-muted/30 border-b border-border">
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="font-medium text-sm text-foreground flex items-center gap-2">
+            <GitBranch className="h-4 w-4 text-purple-400" />
+            Build Ready for Review
+          </h3>
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onShowDiffDialog(true)}
+              className="h-7 px-2 text-xs"
+            >
+              <Eye className="h-3.5 w-3.5 mr-1" />
+              View
+            </Button>
+            {worktreeStatus.worktreePath && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  window.electronAPI.createTerminal({
+                    id: `open-${task.id}`,
+                    cwd: worktreeStatus.worktreePath!
+                  });
+                }}
+                className="h-7 px-2"
+                title="Open in terminal"
+              >
+                <Terminal className="h-3.5 w-3.5" />
+              </Button>
+            )}
          </div>
        </div>
+
+        {/* Compact stats row */}
+        <div className="flex items-center gap-4 text-xs">
+          <span className="flex items-center gap-1.5 text-muted-foreground">
+            <FileCode className="h-3.5 w-3.5" />
+            <span className="font-medium text-foreground">{worktreeStatus.filesChanged || 0}</span> files
+          </span>
+          <span className="flex items-center gap-1.5 text-muted-foreground">
+            <GitCommit className="h-3.5 w-3.5" />
+            <span className="font-medium text-foreground">{worktreeStatus.commitCount || 0}</span> commits
+          </span>
+          <span className="flex items-center gap-1 text-success">
+            <Plus className="h-3.5 w-3.5" />
+            <span className="font-medium">{worktreeStatus.additions || 0}</span>
+          </span>
+          <span className="flex items-center gap-1 text-destructive">
+            <Minus className="h-3.5 w-3.5" />
+            <span className="font-medium">{worktreeStatus.deletions || 0}</span>
+          </span>
+        </div>
+
+        {/* Branch info */}
        {worktreeStatus.branch && (
-          <div className="mt-2 pt-2 border-t border-border/50 text-xs text-muted-foreground">
-            Branch: <code className="bg-background px-1 rounded">{worktreeStatus.branch}</code>
-            {' → '}
-            <code className="bg-background px-1 rounded">{worktreeStatus.baseBranch || 'main'}</code>
+          <div className="mt-2 text-xs text-muted-foreground">
+            <code className="bg-background/80 px-1.5 py-0.5 rounded text-[11px]">{worktreeStatus.branch}</code>
+            <span className="mx-1.5">→</span>
+            <code className="bg-background/80 px-1.5 py-0.5 rounded text-[11px]">{worktreeStatus.baseBranch || 'main'}</code>
          </div>
        )}
      </div>

-      {/* Workspace Error */}
-      {workspaceError && (
-        <div className="bg-destructive/10 border border-destructive/30 rounded-lg p-3 mb-3">
-          <p className="text-sm text-destructive">{workspaceError}</p>
-        </div>
-      )}
+      {/* Status/Warnings Section */}
+      <div className="px-4 py-3 space-y-3">
+        {/* Workspace Error */}
+        {workspaceError && (
+          <div className="flex items-start gap-2 p-2.5 rounded-lg bg-destructive/10 border border-destructive/20">
+            <AlertTriangle className="h-4 w-4 text-destructive mt-0.5 flex-shrink-0" />
+            <p className="text-sm text-destructive">{workspaceError}</p>
+          </div>
+        )}

-      {/* Uncommitted Changes Warning */}
-      {hasUncommittedChanges && (
-        <div className="bg-warning/10 border border-warning/30 rounded-lg p-3 mb-3">
-          <div className="flex items-start gap-2">
+        {/* Uncommitted Changes Warning */}
+        {hasUncommittedChanges && (
+          <div className="flex items-start gap-2 p-2.5 rounded-lg bg-warning/10 border border-warning/20">
            <AlertTriangle className="h-4 w-4 text-warning mt-0.5 flex-shrink-0" />
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-warning">
-                Uncommitted Changes Detected
+                {uncommittedCount} uncommitted {uncommittedCount === 1 ? 'change' : 'changes'} in main project
              </p>
-              <p className="text-xs text-muted-foreground mt-1">
-                Your main project has {uncommittedCount} uncommitted {uncommittedCount === 1 ? 'change' : 'changes'}.
-                Please commit or stash them before staging to avoid conflicts.
+              <p className="text-xs text-muted-foreground mt-0.5">
+                Commit or stash them before staging to avoid conflicts.
              </p>
-              <div className="flex gap-2 mt-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    window.electronAPI.createTerminal({
-                      id: `stash-${task.id}`,
-                      cwd: worktreeStatus.worktreePath?.replace('.worktrees/' + task.specId, '') || undefined
-                    });
-                  }}
-                  className="text-xs h-7"
-                >
-                  Open Terminal to Stash
-                </Button>
-              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  window.electronAPI.createTerminal({
+                    id: `stash-${task.id}`,
+                    cwd: worktreeStatus.worktreePath?.replace('.worktrees/' + task.specId, '') || undefined
+                  });
+                }}
+                className="text-xs h-6 mt-2"
+              >
+                <Terminal className="h-3 w-3 mr-1" />
+                Open Terminal
+              </Button>
            </div>
          </div>
-        </div>
-      )}
-
-      {/* Action Buttons */}
-      <div className="flex gap-2 mb-3">
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => onShowDiffDialog(true)}
-          className="flex-1"
-        >
-          <Eye className="mr-2 h-4 w-4" />
-          View Changes
-        </Button>
-        {mergePreview && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              console.warn('[WorkspaceStatus] Refresh conflicts clicked');
-              onLoadMergePreview();
-            }}
-            disabled={isLoadingPreview}
-            className="flex-none"
-            title="Refresh conflict check"
-          >
-            {isLoadingPreview ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <RotateCcw className="h-4 w-4" />
-            )}
-          </Button>
        )}
-        {worktreeStatus.worktreePath && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              window.electronAPI.createTerminal({
-                id: `open-${task.id}`,
-                cwd: worktreeStatus.worktreePath!
-              });
-            }}
-            className="flex-none"
-            title="Open worktree in terminal"
-          >
-            <ExternalLink className="h-4 w-4" />
-          </Button>
+
+        {/* Loading indicator */}
+        {isLoadingPreview && !mergePreview && (
+          <div className="flex items-center gap-2 text-muted-foreground text-sm py-2">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Checking for conflicts...
+          </div>
+        )}
+
+        {/* Merge Status */}
+        {mergePreview && (
+          <div className={cn(
+            "flex items-center justify-between p-2.5 rounded-lg border",
+            hasGitConflicts
+              ? "bg-warning/10 border-warning/20"
+              : !hasAIConflicts
+                ? "bg-success/10 border-success/20"
+                : "bg-warning/10 border-warning/20"
+          )}>
+            <div className="flex items-center gap-2">
+              {hasGitConflicts ? (
+                <>
+                  <AlertTriangle className="h-4 w-4 text-warning" />
+                  <div>
+                    <span className="text-sm font-medium text-warning">Branch Diverged</span>
+                    <span className="text-xs text-muted-foreground ml-2">AI will resolve</span>
+                  </div>
+                </>
+              ) : !hasAIConflicts ? (
+                <>
+                  <CheckCircle className="h-4 w-4 text-success" />
+                  <span className="text-sm font-medium text-success">Ready to merge</span>
+                  <span className="text-xs text-muted-foreground ml-1">
+                    {mergePreview.summary.totalFiles} files
+                  </span>
+                </>
+              ) : (
+                <>
+                  <AlertTriangle className="h-4 w-4 text-warning" />
+                  <span className="text-sm font-medium text-warning">
+                    {mergePreview.conflicts.length} conflict{mergePreview.conflicts.length !== 1 ? 's' : ''}
+                  </span>
+                </>
+              )}
+            </div>
+            <div className="flex items-center gap-1">
+              {(hasGitConflicts || hasAIConflicts) && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => onShowConflictDialog(true)}
+                  className="h-7 text-xs"
+                >
+                  Details
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onLoadMergePreview}
+                disabled={isLoadingPreview}
+                className="h-7 px-2"
+                title="Refresh"
+              >
+                {isLoadingPreview ? (
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                ) : (
+                  <RotateCcw className="h-3.5 w-3.5" />
+                )}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Git Conflicts Details */}
+        {hasGitConflicts && mergePreview?.gitConflicts && (
+          <div className="text-xs text-muted-foreground pl-6">
+            Main branch has {mergePreview.gitConflicts.commitsBehind} new commit{mergePreview.gitConflicts.commitsBehind !== 1 ? 's' : ''}.
+            {mergePreview.gitConflicts.conflictingFiles.length > 0 && (
+              <span className="text-warning">
+                {' '}{mergePreview.gitConflicts.conflictingFiles.length} file{mergePreview.gitConflicts.conflictingFiles.length !== 1 ? 's' : ''} need merging.
+              </span>
+            )}
+          </div>
        )}
      </div>

-      {/* Loading indicator while checking conflicts */}
-      {isLoadingPreview && !mergePreview && (
-        <div className="flex items-center gap-2 text-muted-foreground text-sm mb-3">
-          <Loader2 className="h-4 w-4 animate-spin" />
-          Checking for conflicts...
+      {/* Actions Footer */}
+      <div className="px-4 py-3 bg-muted/20 border-t border-border space-y-3">
+        {/* Stage Only Option */}
+        <label className="inline-flex items-center gap-2.5 text-sm cursor-pointer select-none px-3 py-2 rounded-lg border border-border bg-background/50 hover:bg-background/80 transition-colors">
+          <Checkbox
+            checked={stageOnly}
+            onCheckedChange={(checked) => onStageOnlyChange(checked === true)}
+            className="border-muted-foreground/50 data-[state=checked]:border-primary"
+          />
+          <span className={cn(
+            "transition-colors",
+            stageOnly ? "text-foreground" : "text-muted-foreground"
+          )}>Stage only (review in IDE before committing)</span>
+        </label>
+
+        {/* Primary Actions */}
+        <div className="flex gap-2">
+          <Button
+            variant={hasGitConflicts ? "warning" : "success"}
+            onClick={onMerge}
+            disabled={isMerging || isDiscarding}
+            className="flex-1"
+          >
+            {isMerging ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                {hasGitConflicts ? 'Resolving...' : stageOnly ? 'Staging...' : 'Merging...'}
+              </>
+            ) : (
+              <>
+                <GitMerge className="mr-2 h-4 w-4" />
+                {hasGitConflicts
+                  ? (stageOnly ? 'Stage with AI Merge' : 'Merge with AI')
+                  : (stageOnly ? 'Stage Changes' : 'Merge to Main')}
+              </>
+            )}
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => onShowDiscardDialog(true)}
+            disabled={isMerging || isDiscarding}
+            className="text-muted-foreground hover:text-destructive hover:bg-destructive/10 hover:border-destructive/30"
+            title="Discard build"
+          >
+            <FolderX className="h-4 w-4" />
+          </Button>
        </div>
-      )}
-
-      {/* Merge Preview Summary */}
-      {mergePreview && (
-        <MergePreviewSummary
-          mergePreview={mergePreview}
-          onShowConflictDialog={onShowConflictDialog}
-        />
-      )}
-
-      {/* Stage Only Option */}
-      <label className="flex items-center gap-2 text-sm text-muted-foreground cursor-pointer select-none">
-        <input
-          type="checkbox"
-          checked={stageOnly}
-          onChange={(e) => onStageOnlyChange(e.target.checked)}
-          className="rounded border-border"
-        />
-        <span>Stage only (review in IDE before committing)</span>
-      </label>
-
-      {/* Primary Actions */}
-      <div className="flex gap-2">
-        <Button
-          variant={hasGitConflicts ? "warning" : "success"}
-          onClick={onMerge}
-          disabled={isMerging || isDiscarding}
-          className="flex-1"
-          title={hasGitConflicts ? "AI will resolve conflicts automatically" : undefined}
-        >
-          {isMerging ? (
-            <>
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              {hasGitConflicts
-                ? 'AI Resolving Conflicts...'
-                : stageOnly ? 'Staging...' : 'Merging...'}
-            </>
-          ) : hasGitConflicts ? (
-            <>
-              <GitMerge className="mr-2 h-4 w-4" />
-              {stageOnly ? 'Stage with AI Merge' : 'Merge with AI'}
-            </>
-          ) : (
-            <>
-              <GitMerge className="mr-2 h-4 w-4" />
-              {stageOnly ? 'Stage Changes' : 'Merge to Main'}
-            </>
-          )}
-        </Button>
-        <Button
-          variant="outline"
-          onClick={() => onShowDiscardDialog(true)}
-          disabled={isMerging || isDiscarding}
-          className="text-destructive hover:text-destructive hover:bg-destructive/10"
-        >
-          <FolderX className="h-4 w-4" />
-        </Button>
      </div>
    </div>
  );
@@ -62,11 +62,11 @@ const browserMockAPI: ElectronAPI = {
    success: true
  }),

-  generateRoadmap: () => {
+  generateRoadmap: (_projectId: string, _enableCompetitorAnalysis?: boolean, _refreshCompetitorAnalysis?: boolean) => {
    console.warn('[Browser Mock] generateRoadmap called');
  },

-  refreshRoadmap: () => {
+  refreshRoadmap: (_projectId: string, _enableCompetitorAnalysis?: boolean, _refreshCompetitorAnalysis?: boolean) => {
    console.warn('[Browser Mock] refreshRoadmap called');
  },

@@ -4,9 +4,48 @@ import type {
  Roadmap,
  RoadmapFeature,
  RoadmapFeatureStatus,
-  RoadmapGenerationStatus
+  RoadmapGenerationStatus,
+  FeatureSource
 } from '../../shared/types';

+/**
+ * Migrate roadmap data to latest schema
+ * - Converts 'idea' status to 'under_review' (Canny-compatible)
+ * - Adds default source for features without one
+ */
+function migrateRoadmapIfNeeded(roadmap: Roadmap): Roadmap {
+  let needsMigration = false;
+
+  const migratedFeatures = roadmap.features.map((feature) => {
+    const migratedFeature = { ...feature };
+
+    // Migrate 'idea' status to 'under_review'
+    if ((feature.status as string) === 'idea') {
+      migratedFeature.status = 'under_review';
+      needsMigration = true;
+    }
+
+    // Add default source if missing
+    if (!feature.source) {
+      migratedFeature.source = { provider: 'internal' } as FeatureSource;
+      needsMigration = true;
+    }
+
+    return migratedFeature;
+  });
+
+  if (needsMigration) {
+    console.log('[Roadmap] Migrated roadmap data to latest schema');
+    return {
+      ...roadmap,
+      features: migratedFeatures,
+      updatedAt: new Date()
+    };
+  }
+
+  return roadmap;
+}
+
 interface RoadmapState {
  // Data
  roadmap: Roadmap | null;
@@ -20,7 +59,9 @@ interface RoadmapState {
  setGenerationStatus: (status: RoadmapGenerationStatus) => void;
  setCurrentProjectId: (projectId: string | null) => void;
  updateFeatureStatus: (featureId: string, status: RoadmapFeatureStatus) => void;
+  markFeatureDoneBySpecId: (specId: string) => void;
  updateFeatureLinkedSpec: (featureId: string, specId: string) => void;
+  deleteFeature: (featureId: string) => void;
  clearRoadmap: () => void;
  // Drag-and-drop actions
  reorderFeatures: (phaseId: string, featureIds: string[]) => void;
@@ -67,13 +108,33 @@ export const useRoadmapStore = create<RoadmapState>((set) => ({
      };
    }),

+  // Mark feature as done when its linked task completes
+  markFeatureDoneBySpecId: (specId: string) =>
+    set((state) => {
+      if (!state.roadmap) return state;
+
+      const updatedFeatures = state.roadmap.features.map((feature) =>
+        feature.linkedSpecId === specId
+          ? { ...feature, status: 'done' as RoadmapFeatureStatus }
+          : feature
+      );
+
+      return {
+        roadmap: {
+          ...state.roadmap,
+          features: updatedFeatures,
+          updatedAt: new Date()
+        }
+      };
+    }),
+
  updateFeatureLinkedSpec: (featureId, specId) =>
    set((state) => {
      if (!state.roadmap) return state;

      const updatedFeatures = state.roadmap.features.map((feature) =>
        feature.id === featureId
-          ? { ...feature, linkedSpecId: specId, status: 'planned' as RoadmapFeatureStatus }
+          ? { ...feature, linkedSpecId: specId, status: 'in_progress' as RoadmapFeatureStatus }
          : feature
      );

@@ -86,6 +147,23 @@ export const useRoadmapStore = create<RoadmapState>((set) => ({
      };
    }),

+  deleteFeature: (featureId) =>
+    set((state) => {
+      if (!state.roadmap) return state;
+
+      const updatedFeatures = state.roadmap.features.filter(
+        (feature) => feature.id !== featureId
+      );
+
+      return {
+        roadmap: {
+          ...state.roadmap,
+          features: updatedFeatures,
+          updatedAt: new Date()
+        }
+      };
+    }),
+
  clearRoadmap: () =>
    set({
      roadmap: null,
@@ -193,10 +271,20 @@ export async function loadRoadmap(projectId: string): Promise<void> {

  const result = await window.electronAPI.getRoadmap(projectId);
  if (result.success && result.data) {
-    store.setRoadmap(result.data);
+    // Migrate roadmap to latest schema if needed
+    const migratedRoadmap = migrateRoadmapIfNeeded(result.data);
+    store.setRoadmap(migratedRoadmap);
+
+    // Save migrated roadmap if changes were made
+    if (migratedRoadmap !== result.data) {
+      window.electronAPI.saveRoadmap(projectId, migratedRoadmap).catch((err) => {
+        console.error('[Roadmap] Failed to save migrated roadmap:', err);
+      });
+    }
+
    // Extract and set competitor analysis separately if present
-    if (result.data.competitorAnalysis) {
-      store.setCompetitorAnalysis(result.data.competitorAnalysis);
+    if (migratedRoadmap.competitorAnalysis) {
+      store.setCompetitorAnalysis(migratedRoadmap.competitorAnalysis);
    } else {
      store.setCompetitorAnalysis(null);
    }
@@ -206,10 +294,14 @@ export async function loadRoadmap(projectId: string): Promise<void> {
  }
 }

-export function generateRoadmap(projectId: string, enableCompetitorAnalysis?: boolean): void {
+export function generateRoadmap(
+  projectId: string,
+  enableCompetitorAnalysis?: boolean,
+  refreshCompetitorAnalysis?: boolean
+): void {
  // Debug logging
  if (window.DEBUG) {
-    console.log('[Roadmap] Starting generation:', { projectId, enableCompetitorAnalysis });
+    console.log('[Roadmap] Starting generation:', { projectId, enableCompetitorAnalysis, refreshCompetitorAnalysis });
  }

  useRoadmapStore.getState().setGenerationStatus({
@@ -217,16 +309,25 @@ export function generateRoadmap(projectId: string, enableCompetitorAnalysis?: bo
    progress: 0,
    message: 'Starting roadmap generation...'
  });
-  window.electronAPI.generateRoadmap(projectId, enableCompetitorAnalysis);
+  window.electronAPI.generateRoadmap(projectId, enableCompetitorAnalysis, refreshCompetitorAnalysis);
 }

-export function refreshRoadmap(projectId: string, enableCompetitorAnalysis?: boolean): void {
+export function refreshRoadmap(
+  projectId: string,
+  enableCompetitorAnalysis?: boolean,
+  refreshCompetitorAnalysis?: boolean
+): void {
+  // Debug logging
+  if (window.DEBUG) {
+    console.log('[Roadmap] Starting refresh:', { projectId, enableCompetitorAnalysis, refreshCompetitorAnalysis });
+  }
+
  useRoadmapStore.getState().setGenerationStatus({
    phase: 'analyzing',
    progress: 0,
    message: 'Refreshing roadmap...'
  });
-  window.electronAPI.refreshRoadmap(projectId, enableCompetitorAnalysis);
+  window.electronAPI.refreshRoadmap(projectId, enableCompetitorAnalysis, refreshCompetitorAnalysis);
 }

 export async function stopRoadmap(projectId: string): Promise<boolean> {
@@ -204,6 +204,810 @@
  --shadow-focus: 0 0 0 2px rgba(214, 216, 118, 0.2);
 }

+/* ============================================
+   DUSK THEME (Light)
+   Warm, muted palette inspired by Fey/Oscura
+   ============================================ */
+[data-theme="dusk"] {
+  /* Backgrounds */
+  --background: #F5F5F0;
+  --foreground: #131419;
+
+  /* Card surfaces */
+  --card: #FFFFFF;
+  --card-foreground: #131419;
+
+  /* Primary accent - muted olive/yellow */
+  --primary: #B8B978;
+  --primary-foreground: #131419;
+
+  /* Secondary */
+  --secondary: #EAEAE5;
+  --secondary-foreground: #131419;
+
+  /* Muted */
+  --muted: #F0F0EB;
+  --muted-foreground: #5C6974;
+
+  /* Accent */
+  --accent: #F0F0E0;
+  --accent-foreground: #B8B978;
+
+  /* Destructive */
+  --destructive: #D84F68;
+  --destructive-foreground: #FFFFFF;
+
+  /* Borders and inputs */
+  --border: #E0E0DB;
+  --input: #E0E0DB;
+  --ring: #B8B978;
+
+  /* Sidebar */
+  --sidebar: #FFFFFF;
+  --sidebar-foreground: #131419;
+
+  /* Popover */
+  --popover: #FFFFFF;
+  --popover-foreground: #131419;
+
+  /* Semantic colors */
+  --success: #4EBE96;
+  --success-foreground: #FFFFFF;
+  --success-light: #E0F5ED;
+  --warning: #D2D714;
+  --warning-foreground: #131419;
+  --warning-light: #F5F5D0;
+  --info: #479FFA;
+  --info-foreground: #FFFFFF;
+  --info-light: #E8F4FF;
+  --error: #D84F68;
+  --error-light: #FCE8EC;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+  --shadow-focus: 0 0 0 3px rgba(184, 185, 120, 0.2);
+}
+
+/* ============================================
+   DUSK THEME (Dark)
+   Fey-inspired dark theme
+   ============================================ */
+[data-theme="dusk"].dark {
+  /* Backgrounds */
+  --background: #131419;
+  --foreground: #E6E6E6;
+
+  /* Card surfaces */
+  --card: #1A1B21;
+  --card-foreground: #E6E6E6;
+
+  /* Primary accent - pale yellow */
+  --primary: #E6E7A3;
+  --primary-foreground: #131419;
+
+  /* Secondary */
+  --secondary: #222329;
+  --secondary-foreground: #E6E6E6;
+
+  /* Muted */
+  --muted: #16171D;
+  --muted-foreground: #868F97;
+
+  /* Accent */
+  --accent: #2A2B1F;
+  --accent-foreground: #E6E7A3;
+
+  /* Destructive */
+  --destructive: #D84F68;
+  --destructive-foreground: #131419;
+
+  /* Borders and inputs */
+  --border: #282828;
+  --input: #282828;
+  --ring: #E6E7A3;
+
+  /* Sidebar */
+  --sidebar: #16171D;
+  --sidebar-foreground: #E6E6E6;
+
+  /* Popover */
+  --popover: #222329;
+  --popover-foreground: #E6E6E6;
+
+  /* Semantic colors */
+  --success: #4EBE96;
+  --success-foreground: #131419;
+  --success-light: #1A2E28;
+  --warning: #D2D714;
+  --warning-foreground: #131419;
+  --warning-light: #2A2B1A;
+  --info: #479FFA;
+  --info-foreground: #131419;
+  --info-light: #1A2433;
+  --error: #D84F68;
+  --error-light: #2E1A1F;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
+  --shadow-focus: 0 0 0 2px rgba(230, 231, 163, 0.25);
+}
+
+/* ============================================
+   LIME THEME (Light)
+   Fresh, energetic lime/chartreuse theme
+   ============================================ */
+[data-theme="lime"] {
+  /* Backgrounds */
+  --background: #E8F5A3;
+  --foreground: #1A1A2E;
+
+  /* Card surfaces */
+  --card: #FFFFFF;
+  --card-foreground: #1A1A2E;
+
+  /* Primary accent - purple for contrast against lime */
+  --primary: #7C3AED;
+  --primary-foreground: #FFFFFF;
+
+  /* Secondary */
+  --secondary: #F5F9E8;
+  --secondary-foreground: #1A1A2E;
+
+  /* Muted */
+  --muted: #F8FAFC;
+  --muted-foreground: #64748B;
+
+  /* Accent */
+  --accent: #EDE9FE;
+  --accent-foreground: #7C3AED;
+
+  /* Destructive */
+  --destructive: #DC2626;
+  --destructive-foreground: #FFFFFF;
+
+  /* Borders and inputs */
+  --border: #E2E8F0;
+  --input: #E2E8F0;
+  --ring: #7C3AED;
+
+  /* Sidebar */
+  --sidebar: #FFFFFF;
+  --sidebar-foreground: #1A1A2E;
+
+  /* Popover */
+  --popover: #FFFFFF;
+  --popover-foreground: #1A1A2E;
+
+  /* Semantic colors */
+  --success: #059669;
+  --success-foreground: #FFFFFF;
+  --success-light: #D1FAE5;
+  --warning: #D97706;
+  --warning-foreground: #FFFFFF;
+  --warning-light: #FEF3C7;
+  --info: #2563EB;
+  --info-foreground: #FFFFFF;
+  --info-light: #DBEAFE;
+  --error: #DC2626;
+  --error-light: #FEE2E2;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+  --shadow-focus: 0 0 0 3px rgba(124, 58, 237, 0.2);
+}
+
+/* ============================================
+   LIME THEME (Dark)
+   Fresh lime theme with deep purple undertones
+   ============================================ */
+[data-theme="lime"].dark {
+  /* Backgrounds */
+  --background: #0F0F1A;
+  --foreground: #F8FAFC;
+
+  /* Card surfaces */
+  --card: #1E1E2E;
+  --card-foreground: #F8FAFC;
+
+  /* Primary accent - bright purple for dark mode */
+  --primary: #8B5CF6;
+  --primary-foreground: #0F0F1A;
+
+  /* Secondary */
+  --secondary: #1A1A2E;
+  --secondary-foreground: #F8FAFC;
+
+  /* Muted */
+  --muted: #13131F;
+  --muted-foreground: #A1A1B5;
+
+  /* Accent */
+  --accent: #2E2350;
+  --accent-foreground: #8B5CF6;
+
+  /* Destructive */
+  --destructive: #F87171;
+  --destructive-foreground: #0F0F1A;
+
+  /* Borders and inputs */
+  --border: #2E2E40;
+  --input: #2E2E40;
+  --ring: #8B5CF6;
+
+  /* Sidebar */
+  --sidebar: #13131F;
+  --sidebar-foreground: #F8FAFC;
+
+  /* Popover */
+  --popover: #262638;
+  --popover-foreground: #F8FAFC;
+
+  /* Semantic colors */
+  --success: #34D399;
+  --success-foreground: #0F0F1A;
+  --success-light: #134E4A;
+  --warning: #FBBF24;
+  --warning-foreground: #0F0F1A;
+  --warning-light: #451A03;
+  --info: #60A5FA;
+  --info-foreground: #0F0F1A;
+  --info-light: #1E3A8A;
+  --error: #F87171;
+  --error-light: #450A0A;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
+  --shadow-focus: 0 0 0 3px rgba(139, 92, 246, 0.3);
+}
+
+/* ============================================
+   OCEAN THEME (Light)
+   Calm, professional blue tones
+   ============================================ */
+[data-theme="ocean"] {
+  /* Backgrounds */
+  --background: #E0F2FE;
+  --foreground: #0C4A6E;
+
+  /* Card surfaces */
+  --card: #FFFFFF;
+  --card-foreground: #0C4A6E;
+
+  /* Primary accent - sky blue */
+  --primary: #0284C7;
+  --primary-foreground: #FFFFFF;
+
+  /* Secondary */
+  --secondary: #F0F9FF;
+  --secondary-foreground: #0C4A6E;
+
+  /* Muted */
+  --muted: #F8FAFC;
+  --muted-foreground: #64748B;
+
+  /* Accent */
+  --accent: #E0F2FE;
+  --accent-foreground: #0284C7;
+
+  /* Destructive */
+  --destructive: #DC2626;
+  --destructive-foreground: #FFFFFF;
+
+  /* Borders and inputs */
+  --border: #BAE6FD;
+  --input: #BAE6FD;
+  --ring: #0284C7;
+
+  /* Sidebar */
+  --sidebar: #FFFFFF;
+  --sidebar-foreground: #0C4A6E;
+
+  /* Popover */
+  --popover: #FFFFFF;
+  --popover-foreground: #0C4A6E;
+
+  /* Semantic colors */
+  --success: #059669;
+  --success-foreground: #FFFFFF;
+  --success-light: #D1FAE5;
+  --warning: #D97706;
+  --warning-foreground: #FFFFFF;
+  --warning-light: #FEF3C7;
+  --info: #2563EB;
+  --info-foreground: #FFFFFF;
+  --info-light: #DBEAFE;
+  --error: #DC2626;
+  --error-light: #FEE2E2;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+  --shadow-focus: 0 0 0 3px rgba(2, 132, 199, 0.2);
+}
+
+/* ============================================
+   OCEAN THEME (Dark)
+   Deep ocean blue tones
+   ============================================ */
+[data-theme="ocean"].dark {
+  /* Backgrounds */
+  --background: #082F49;
+  --foreground: #F0F9FF;
+
+  /* Card surfaces */
+  --card: #164E63;
+  --card-foreground: #F0F9FF;
+
+  /* Primary accent - bright sky blue */
+  --primary: #38BDF8;
+  --primary-foreground: #082F49;
+
+  /* Secondary */
+  --secondary: #0C4A6E;
+  --secondary-foreground: #F0F9FF;
+
+  /* Muted */
+  --muted: #0A3D5C;
+  --muted-foreground: #7DD3FC;
+
+  /* Accent */
+  --accent: #0C4A6E;
+  --accent-foreground: #38BDF8;
+
+  /* Destructive */
+  --destructive: #F87171;
+  --destructive-foreground: #082F49;
+
+  /* Borders and inputs */
+  --border: #0E7490;
+  --input: #0E7490;
+  --ring: #38BDF8;
+
+  /* Sidebar */
+  --sidebar: #0A3D5C;
+  --sidebar-foreground: #F0F9FF;
+
+  /* Popover */
+  --popover: #1E6B8A;
+  --popover-foreground: #F0F9FF;
+
+  /* Semantic colors */
+  --success: #34D399;
+  --success-foreground: #082F49;
+  --success-light: #134E4A;
+  --warning: #FBBF24;
+  --warning-foreground: #082F49;
+  --warning-light: #451A03;
+  --info: #60A5FA;
+  --info-foreground: #082F49;
+  --info-light: #1E3A8A;
+  --error: #F87171;
+  --error-light: #450A0A;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
+  --shadow-focus: 0 0 0 3px rgba(56, 189, 248, 0.3);
+}
+
+/* ============================================
+   RETRO THEME (Light)
+   Warm, nostalgic amber/orange vibes
+   ============================================ */
+[data-theme="retro"] {
+  /* Backgrounds */
+  --background: #FEF3C7;
+  --foreground: #78350F;
+
+  /* Card surfaces */
+  --card: #FFFFFF;
+  --card-foreground: #78350F;
+
+  /* Primary accent - warm amber/orange */
+  --primary: #D97706;
+  --primary-foreground: #FFFFFF;
+
+  /* Secondary */
+  --secondary: #FFFBEB;
+  --secondary-foreground: #78350F;
+
+  /* Muted */
+  --muted: #FEFCE8;
+  --muted-foreground: #92400E;
+
+  /* Accent */
+  --accent: #FEF3C7;
+  --accent-foreground: #D97706;
+
+  /* Destructive */
+  --destructive: #B91C1C;
+  --destructive-foreground: #FFFFFF;
+
+  /* Borders and inputs */
+  --border: #FDE68A;
+  --input: #FDE68A;
+  --ring: #D97706;
+
+  /* Sidebar */
+  --sidebar: #FFFFFF;
+  --sidebar-foreground: #78350F;
+
+  /* Popover */
+  --popover: #FFFFFF;
+  --popover-foreground: #78350F;
+
+  /* Semantic colors */
+  --success: #15803D;
+  --success-foreground: #FFFFFF;
+  --success-light: #DCFCE7;
+  --warning: #CA8A04;
+  --warning-foreground: #78350F;
+  --warning-light: #FEF9C3;
+  --info: #1D4ED8;
+  --info-foreground: #FFFFFF;
+  --info-light: #DBEAFE;
+  --error: #B91C1C;
+  --error-light: #FEE2E2;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+  --shadow-focus: 0 0 0 3px rgba(217, 119, 6, 0.2);
+}
+
+/* ============================================
+   RETRO THEME (Dark)
+   Warm stone/brown tones with golden accents
+   ============================================ */
+[data-theme="retro"].dark {
+  /* Backgrounds */
+  --background: #1C1917;
+  --foreground: #FEFCE8;
+
+  /* Card surfaces */
+  --card: #44403C;
+  --card-foreground: #FEFCE8;
+
+  /* Primary accent - bright amber/gold */
+  --primary: #FBBF24;
+  --primary-foreground: #1C1917;
+
+  /* Secondary */
+  --secondary: #292524;
+  --secondary-foreground: #FEFCE8;
+
+  /* Muted */
+  --muted: #1C1917;
+  --muted-foreground: #FDE68A;
+
+  /* Accent */
+  --accent: #451A03;
+  --accent-foreground: #FBBF24;
+
+  /* Destructive */
+  --destructive: #F87171;
+  --destructive-foreground: #1C1917;
+
+  /* Borders and inputs */
+  --border: #78716C;
+  --input: #78716C;
+  --ring: #FBBF24;
+
+  /* Sidebar */
+  --sidebar: #1C1917;
+  --sidebar-foreground: #FEFCE8;
+
+  /* Popover */
+  --popover: #57534E;
+  --popover-foreground: #FEFCE8;
+
+  /* Semantic colors */
+  --success: #4ADE80;
+  --success-foreground: #1C1917;
+  --success-light: #14532D;
+  --warning: #FACC15;
+  --warning-foreground: #1C1917;
+  --warning-light: #422006;
+  --info: #60A5FA;
+  --info-foreground: #1C1917;
+  --info-light: #1E3A8A;
+  --error: #F87171;
+  --error-light: #450A0A;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
+  --shadow-focus: 0 0 0 3px rgba(251, 191, 36, 0.3);
+}
+
+/* ============================================
+   NEO THEME (Light)
+   Modern, cyberpunk-inspired pink/purple palette
+   ============================================ */
+[data-theme="neo"] {
+  /* Backgrounds */
+  --background: #FDF4FF;
+  --foreground: #581C87;
+
+  /* Card surfaces */
+  --card: #FFFFFF;
+  --card-foreground: #581C87;
+
+  /* Primary accent - fuchsia/magenta */
+  --primary: #D946EF;
+  --primary-foreground: #FFFFFF;
+
+  /* Secondary */
+  --secondary: #FAF5FF;
+  --secondary-foreground: #581C87;
+
+  /* Muted */
+  --muted: #F5F3FF;
+  --muted-foreground: #7C3AED;
+
+  /* Accent */
+  --accent: #FAE8FF;
+  --accent-foreground: #D946EF;
+
+  /* Destructive */
+  --destructive: #E11D48;
+  --destructive-foreground: #FFFFFF;
+
+  /* Borders and inputs */
+  --border: #F0ABFC;
+  --input: #F0ABFC;
+  --ring: #D946EF;
+
+  /* Sidebar */
+  --sidebar: #FFFFFF;
+  --sidebar-foreground: #581C87;
+
+  /* Popover */
+  --popover: #FFFFFF;
+  --popover-foreground: #581C87;
+
+  /* Semantic colors */
+  --success: #06B6D4;
+  --success-foreground: #FFFFFF;
+  --success-light: #CFFAFE;
+  --warning: #F59E0B;
+  --warning-foreground: #581C87;
+  --warning-light: #FEF3C7;
+  --info: #8B5CF6;
+  --info-foreground: #FFFFFF;
+  --info-light: #EDE9FE;
+  --error: #E11D48;
+  --error-light: #FFE4E6;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+  --shadow-focus: 0 0 0 3px rgba(217, 70, 239, 0.2);
+}
+
+/* ============================================
+   NEO THEME (Dark)
+   Cyberpunk dark mode with neon pink/purple glow
+   ============================================ */
+[data-theme="neo"].dark {
+  /* Backgrounds */
+  --background: #0F0720;
+  --foreground: #FAF5FF;
+
+  /* Card surfaces */
+  --card: #2D1B4E;
+  --card-foreground: #FAF5FF;
+
+  /* Primary accent - bright pink/fuchsia */
+  --primary: #F0ABFC;
+  --primary-foreground: #0F0720;
+
+  /* Secondary */
+  --secondary: #1A0A30;
+  --secondary-foreground: #FAF5FF;
+
+  /* Muted */
+  --muted: #150825;
+  --muted-foreground: #E879F9;
+
+  /* Accent */
+  --accent: #581C87;
+  --accent-foreground: #F0ABFC;
+
+  /* Destructive */
+  --destructive: #FB7185;
+  --destructive-foreground: #0F0720;
+
+  /* Borders and inputs */
+  --border: #581C87;
+  --input: #581C87;
+  --ring: #F0ABFC;
+
+  /* Sidebar */
+  --sidebar: #150825;
+  --sidebar-foreground: #FAF5FF;
+
+  /* Popover */
+  --popover: #3D2563;
+  --popover-foreground: #FAF5FF;
+
+  /* Semantic colors */
+  --success: #22D3EE;
+  --success-foreground: #0F0720;
+  --success-light: #164E63;
+  --warning: #FBBF24;
+  --warning-foreground: #0F0720;
+  --warning-light: #451A03;
+  --info: #A78BFA;
+  --info-foreground: #0F0720;
+  --info-light: #4C1D95;
+  --error: #FB7185;
+  --error-light: #4C0519;
+
+  /* Shadows - with subtle neon glow effect */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(217, 70, 239, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 0 30px rgba(217, 70, 239, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 0 40px rgba(217, 70, 239, 0.15);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 0 50px rgba(217, 70, 239, 0.2);
+  --shadow-focus: 0 0 0 3px rgba(240, 171, 252, 0.4);
+}
+
+/* ============================================
+   FOREST THEME (Light)
+   Natural, earthy green tones
+   ============================================ */
+[data-theme="forest"] {
+  /* Backgrounds */
+  --background: #DCFCE7;
+  --foreground: #14532D;
+
+  /* Card surfaces */
+  --card: #FFFFFF;
+  --card-foreground: #14532D;
+
+  /* Primary accent - natural green */
+  --primary: #16A34A;
+  --primary-foreground: #FFFFFF;
+
+  /* Secondary */
+  --secondary: #F0FDF4;
+  --secondary-foreground: #14532D;
+
+  /* Muted */
+  --muted: #ECFDF5;
+  --muted-foreground: #166534;
+
+  /* Accent */
+  --accent: #DCFCE7;
+  --accent-foreground: #16A34A;
+
+  /* Destructive */
+  --destructive: #DC2626;
+  --destructive-foreground: #FFFFFF;
+
+  /* Borders and inputs */
+  --border: #86EFAC;
+  --input: #86EFAC;
+  --ring: #16A34A;
+
+  /* Sidebar */
+  --sidebar: #FFFFFF;
+  --sidebar-foreground: #14532D;
+
+  /* Popover */
+  --popover: #FFFFFF;
+  --popover-foreground: #14532D;
+
+  /* Semantic colors */
+  --success: #059669;
+  --success-foreground: #FFFFFF;
+  --success-light: #D1FAE5;
+  --warning: #CA8A04;
+  --warning-foreground: #14532D;
+  --warning-light: #FEF9C3;
+  --info: #0284C7;
+  --info-foreground: #FFFFFF;
+  --info-light: #E0F2FE;
+  --error: #DC2626;
+  --error-light: #FEE2E2;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+  --shadow-focus: 0 0 0 3px rgba(22, 163, 74, 0.2);
+}
+
+/* ============================================
+   FOREST THEME (Dark)
+   Deep forest green tones with bright green accents
+   ============================================ */
+[data-theme="forest"].dark {
+  /* Backgrounds */
+  --background: #052E16;
+  --foreground: #F0FDF4;
+
+  /* Card surfaces */
+  --card: #166534;
+  --card-foreground: #F0FDF4;
+
+  /* Primary accent - bright green for dark mode */
+  --primary: #4ADE80;
+  --primary-foreground: #052E16;
+
+  /* Secondary */
+  --secondary: #14532D;
+  --secondary-foreground: #F0FDF4;
+
+  /* Muted */
+  --muted: #0A3D1F;
+  --muted-foreground: #86EFAC;
+
+  /* Accent */
+  --accent: #14532D;
+  --accent-foreground: #4ADE80;
+
+  /* Destructive */
+  --destructive: #F87171;
+  --destructive-foreground: #052E16;
+
+  /* Borders and inputs */
+  --border: #166534;
+  --input: #166534;
+  --ring: #4ADE80;
+
+  /* Sidebar */
+  --sidebar: #0A3D1F;
+  --sidebar-foreground: #F0FDF4;
+
+  /* Popover */
+  --popover: #15803D;
+  --popover-foreground: #F0FDF4;
+
+  /* Semantic colors */
+  --success: #34D399;
+  --success-foreground: #052E16;
+  --success-light: #064E3B;
+  --warning: #FBBF24;
+  --warning-foreground: #052E16;
+  --warning-light: #451A03;
+  --info: #38BDF8;
+  --info-foreground: #052E16;
+  --info-light: #0C4A6E;
+  --error: #F87171;
+  --error-light: #450A0A;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
+  --shadow-focus: 0 0 0 3px rgba(74, 222, 128, 0.3);
+}
+
 /* Base styles */
 * {
  border-color: var(--border);
@@ -9,6 +9,7 @@

 export const DEFAULT_APP_SETTINGS = {
  theme: 'system' as const,
+  colorTheme: 'default' as const,
  defaultModel: 'opus',
  agentFramework: 'auto-claude',
  pythonPath: undefined as string | undefined,
@@ -21,6 +21,9 @@ export * from './changelog';
 // Model and agent profile constants
 export * from './models';

+// Theme constants
+export * from './themes';
+
 // GitHub integration constants
 export * from './github';

@@ -3,7 +3,7 @@
 * Claude models, thinking levels, memory backends, and agent profiles
 */

-import type { AgentProfile, PhaseModelConfig } from '../types/settings';
+import type { AgentProfile, PhaseModelConfig, FeatureModelConfig, FeatureThinkingConfig } from '../types/settings';

 // ============================================
 // Available Models
@@ -49,20 +49,45 @@ export const THINKING_LEVELS = [
 // ============================================

 // Default phase model configuration for Auto profile
-// Optimized for each phase: fast discovery, quality planning, balanced coding, thorough QA
+// Uses Opus across all phases for maximum quality
 export const DEFAULT_PHASE_MODELS: PhaseModelConfig = {
-  spec: 'sonnet',     // Good quality specs without being too slow
+  spec: 'opus',       // Best quality for spec creation
  planning: 'opus',   // Complex architecture decisions benefit from Opus
-  coding: 'sonnet',   // Good balance of speed and quality for implementation
-  qa: 'sonnet'        // Thorough but not overly slow QA
+  coding: 'opus',     // Highest quality implementation
+  qa: 'opus'          // Thorough QA review
 };

 // Default phase thinking configuration for Auto profile
 export const DEFAULT_PHASE_THINKING: import('../types/settings').PhaseThinkingConfig = {
-  spec: 'medium',       // Moderate thinking for spec creation
-  planning: 'high',     // Deep thinking for planning complex features
-  coding: 'medium',     // Standard thinking for coding
-  qa: 'high'            // Thorough analysis for QA review
+  spec: 'ultrathink',   // Deep thinking for comprehensive spec creation
+  planning: 'high',     // High thinking for planning complex features
+  coding: 'low',        // Faster coding iterations
+  qa: 'low'             // Efficient QA review
+};
+
+// ============================================
+// Feature Settings (Non-Pipeline Features)
+// ============================================
+
+// Default feature model configuration (for insights, ideation, roadmap)
+export const DEFAULT_FEATURE_MODELS: FeatureModelConfig = {
+  insights: 'sonnet',   // Fast, responsive chat
+  ideation: 'opus',     // Creative ideation benefits from Opus
+  roadmap: 'opus'       // Strategic planning benefits from Opus
+};
+
+// Default feature thinking configuration
+export const DEFAULT_FEATURE_THINKING: FeatureThinkingConfig = {
+  insights: 'medium',   // Balanced thinking for chat
+  ideation: 'high',     // Deep thinking for creative ideas
+  roadmap: 'high'       // Strategic thinking for roadmap
+};
+
+// Feature labels for UI display
+export const FEATURE_LABELS: Record<keyof FeatureModelConfig, { label: string; description: string }> = {
+  insights: { label: 'Insights Chat', description: 'Ask questions about your codebase' },
+  ideation: { label: 'Ideation', description: 'Generate feature ideas and improvements' },
+  roadmap: { label: 'Roadmap', description: 'Create strategic feature roadmaps' }
 };

 // Default agent profiles for preset model/thinking configurations
@@ -70,9 +95,9 @@ export const DEFAULT_AGENT_PROFILES: AgentProfile[] = [
  {
    id: 'auto',
    name: 'Auto (Optimized)',
-    description: 'Uses different models per phase for optimal speed & quality',
-    model: 'sonnet',  // Fallback/default model
-    thinkingLevel: 'medium',
+    description: 'Uses Opus across all phases with optimized thinking levels',
+    model: 'opus',  // Fallback/default model
+    thinkingLevel: 'high',
    icon: 'Sparkles',
    isAutoProfile: true,
    phaseModels: DEFAULT_PHASE_MODELS,
@@ -40,3 +40,35 @@ export const ROADMAP_IMPACT_COLORS: Record<string, string> = {
  medium: 'bg-info/10 text-info',
  high: 'bg-success/10 text-success'
 };
+
+// ============================================
+// Roadmap Status (for Kanban columns)
+// ============================================
+
+export interface RoadmapStatusColumn {
+  id: string;
+  label: string;
+  color: string;
+  icon: string;
+}
+
+export const ROADMAP_STATUS_COLUMNS: RoadmapStatusColumn[] = [
+  { id: 'under_review', label: 'Under Review', color: 'border-t-muted-foreground/50', icon: 'Eye' },
+  { id: 'planned', label: 'Planned', color: 'border-t-info', icon: 'Calendar' },
+  { id: 'in_progress', label: 'In Progress', color: 'border-t-primary', icon: 'Play' },
+  { id: 'done', label: 'Done', color: 'border-t-success', icon: 'Check' }
+];
+
+export const ROADMAP_STATUS_LABELS: Record<string, string> = {
+  under_review: 'Under Review',
+  planned: 'Planned',
+  in_progress: 'In Progress',
+  done: 'Done'
+};
+
+export const ROADMAP_STATUS_COLORS: Record<string, string> = {
+  under_review: 'bg-muted text-muted-foreground',
+  planned: 'bg-info/10 text-info',
+  in_progress: 'bg-primary/10 text-primary',
+  done: 'bg-success/10 text-success'
+};
@@ -0,0 +1,59 @@
+/**
+ * Theme constants
+ * Color themes for multi-theme support with light/dark mode variants
+ */
+
+import type { ColorThemeDefinition } from '../types/settings';
+
+// ============================================
+// Color Themes
+// ============================================
+
+/**
+ * All available color themes with preview colors for the theme selector.
+ * Each theme has both light and dark mode variants defined in CSS.
+ */
+export const COLOR_THEMES: ColorThemeDefinition[] = [
+  {
+    id: 'default',
+    name: 'Default',
+    description: 'Oscura-inspired with pale yellow accent',
+    previewColors: { bg: '#F2F2ED', accent: '#E6E7A3', darkBg: '#0B0B0F', darkAccent: '#E6E7A3' }
+  },
+  {
+    id: 'dusk',
+    name: 'Dusk',
+    description: 'Warmer variant with slightly lighter dark mode',
+    previewColors: { bg: '#F5F5F0', accent: '#E6E7A3', darkBg: '#131419', darkAccent: '#E6E7A3' }
+  },
+  {
+    id: 'lime',
+    name: 'Lime',
+    description: 'Fresh, energetic lime with purple accents',
+    previewColors: { bg: '#E8F5A3', accent: '#7C3AED', darkBg: '#0F0F1A' }
+  },
+  {
+    id: 'ocean',
+    name: 'Ocean',
+    description: 'Calm, professional blue tones',
+    previewColors: { bg: '#E0F2FE', accent: '#0284C7', darkBg: '#082F49' }
+  },
+  {
+    id: 'retro',
+    name: 'Retro',
+    description: 'Warm, nostalgic amber vibes',
+    previewColors: { bg: '#FEF3C7', accent: '#D97706', darkBg: '#1C1917' }
+  },
+  {
+    id: 'neo',
+    name: 'Neo',
+    description: 'Modern cyberpunk pink/magenta',
+    previewColors: { bg: '#FDF4FF', accent: '#D946EF', darkBg: '#0F0720' }
+  },
+  {
+    id: 'forest',
+    name: 'Forest',
+    description: 'Natural, earthy green tones',
+    previewColors: { bg: '#DCFCE7', accent: '#16A34A', darkBg: '#052E16' }
+  }
+];
@@ -26,6 +26,8 @@ export interface IdeationConfig {
  includeKanbanContext: boolean;
  maxIdeasPerType: number;
  append?: boolean; // If true, append to existing ideas instead of replacing
+  model?: string;          // Model shorthand (opus, sonnet, haiku)
+  thinkingLevel?: string;  // Thinking level (none, low, medium, high, ultrathink)
 }

 export interface IdeaBase {
@@ -143,3 +143,50 @@ export interface GitHubInvestigationStatus {
  message: string;
  error?: string;
 }
+
+// ============================================
+// Roadmap Integration Types (Canny, etc.)
+// ============================================
+
+/**
+ * Represents a feedback item from an external roadmap service
+ */
+export interface RoadmapFeedbackItem {
+  externalId: string;
+  title: string;
+  description: string;
+  votes: number;
+  status: string;  // Provider-specific status
+  url: string;
+  createdAt: Date;
+  updatedAt?: Date;
+  author?: string;
+  tags?: string[];
+}
+
+/**
+ * Connection status for a roadmap provider
+ */
+export interface RoadmapProviderConnection {
+  id: string;
+  name: string;
+  connected: boolean;
+  lastSync?: Date;
+  error?: string;
+}
+
+/**
+ * Configuration for a roadmap provider integration
+ */
+export interface RoadmapProviderConfig {
+  enabled: boolean;
+  apiKey?: string;
+  boardId?: string;
+  autoSync?: boolean;
+  syncIntervalMinutes?: number;
+}
+
+/**
+ * Canny-specific status values
+ */
+export type CannyStatus = 'open' | 'under review' | 'planned' | 'in progress' | 'complete' | 'closed';
@@ -239,8 +239,8 @@ export interface ElectronAPI {
  getRoadmap: (projectId: string) => Promise<IPCResult<Roadmap | null>>;
  getRoadmapStatus: (projectId: string) => Promise<IPCResult<{ isRunning: boolean }>>;
  saveRoadmap: (projectId: string, roadmap: Roadmap) => Promise<IPCResult>;
-  generateRoadmap: (projectId: string, enableCompetitorAnalysis?: boolean) => void;
-  refreshRoadmap: (projectId: string, enableCompetitorAnalysis?: boolean) => void;
+  generateRoadmap: (projectId: string, enableCompetitorAnalysis?: boolean, refreshCompetitorAnalysis?: boolean) => void;
+  refreshRoadmap: (projectId: string, enableCompetitorAnalysis?: boolean, refreshCompetitorAnalysis?: boolean) => void;
  stopRoadmap: (projectId: string) => Promise<IPCResult>;
  updateFeatureStatus: (
    projectId: string,
@@ -319,7 +319,14 @@ export interface ElectronAPI {
  // GitHub OAuth operations (gh CLI)
  checkGitHubCli: () => Promise<IPCResult<{ installed: boolean; version?: string }>>;
  checkGitHubAuth: () => Promise<IPCResult<{ authenticated: boolean; username?: string }>>;
-  startGitHubAuth: () => Promise<IPCResult<{ success: boolean; message?: string }>>;
+  startGitHubAuth: () => Promise<IPCResult<{
+    success: boolean;
+    message?: string;
+    deviceCode?: string;
+    authUrl?: string;
+    browserOpened?: boolean;
+    fallbackUrl?: string;
+  }>>;
  getGitHubToken: () => Promise<IPCResult<{ token: string }>>;
  getGitHubUser: () => Promise<IPCResult<{ username: string; name?: string }>>;
  listGitHubUserRepos: () => Promise<IPCResult<{ repos: Array<{ fullName: string; description: string | null; isPrivate: boolean }> }>>;
@@ -186,31 +186,61 @@ export interface GraphitiConnectionTestResult {
 }

 // Graphiti Provider Types (Memory System V2)
-export type GraphitiProviderType = 'openai' | 'anthropic' | 'google' | 'groq' | 'ollama';
-export type GraphitiEmbeddingProvider = 'openai' | 'voyage' | 'google' | 'huggingface' | 'ollama';
+// LLM Providers: OpenAI, Anthropic, Azure OpenAI, Ollama (local), Google, Groq
+export type GraphitiLLMProvider = 'openai' | 'anthropic' | 'azure_openai' | 'ollama' | 'google' | 'groq';
+// Embedding Providers: OpenAI, Voyage AI, Azure OpenAI, Ollama (local), Google, HuggingFace
+export type GraphitiEmbeddingProvider = 'openai' | 'voyage' | 'azure_openai' | 'ollama' | 'google' | 'huggingface';
+
+// Legacy type alias for backward compatibility
+export type GraphitiProviderType = GraphitiLLMProvider;

 export interface GraphitiProviderConfig {
  // LLM Provider
-  llmProvider: GraphitiProviderType;
+  llmProvider: GraphitiLLMProvider;
  llmModel?: string;  // Model name, uses provider default if not specified

  // Embedding Provider
  embeddingProvider: GraphitiEmbeddingProvider;
  embeddingModel?: string;  // Embedding model, uses provider default if not specified

-  // Provider-specific API keys (stored securely)
+  // OpenAI settings
  openaiApiKey?: string;
-  anthropicApiKey?: string;
-  googleApiKey?: string;
-  groqApiKey?: string;
-  voyageApiKey?: string;
+  openaiModel?: string;
+  openaiEmbeddingModel?: string;

-  // Ollama-specific config (local LLM, no API key required)
+  // Anthropic settings (LLM only - needs separate embedder)
+  anthropicApiKey?: string;
+  anthropicModel?: string;
+
+  // Azure OpenAI settings
+  azureOpenaiApiKey?: string;
+  azureOpenaiBaseUrl?: string;
+  azureOpenaiLlmDeployment?: string;
+  azureOpenaiEmbeddingDeployment?: string;
+
+  // Voyage AI settings (embeddings only - commonly used with Anthropic)
+  voyageApiKey?: string;
+  voyageEmbeddingModel?: string;
+
+  // Google AI settings (LLM and embeddings)
+  googleApiKey?: string;
+  googleLlmModel?: string;
+  googleEmbeddingModel?: string;
+
+  // Ollama settings (local LLM, no API key required)
  ollamaBaseUrl?: string;  // Default: http://localhost:11434
  ollamaLlmModel?: string;
  ollamaEmbeddingModel?: string;
  ollamaEmbeddingDim?: number;

+  // Groq settings
+  groqApiKey?: string;
+  groqModel?: string;
+
+  // HuggingFace settings (embeddings only)
+  huggingfaceApiKey?: string;
+  huggingfaceEmbeddingModel?: string;
+
  // FalkorDB connection (required for all providers)
  falkorDbHost?: string;
  falkorDbPort?: number;
@@ -68,10 +68,19 @@ export interface CompetitorAnalysis {
 // ============================================

 export type RoadmapFeaturePriority = 'must' | 'should' | 'could' | 'wont';
-export type RoadmapFeatureStatus = 'idea' | 'planned' | 'in_progress' | 'done';
+export type RoadmapFeatureStatus = 'under_review' | 'planned' | 'in_progress' | 'done';
 export type RoadmapPhaseStatus = 'planned' | 'in_progress' | 'completed';
 export type RoadmapStatus = 'draft' | 'active' | 'archived';

+// Feature source tracking for external integrations (Canny, GitHub Issues, etc.)
+export type FeatureSourceProvider = 'internal' | 'canny' | 'github_issue';
+
+export interface FeatureSource {
+  provider: FeatureSourceProvider;
+  importedAt?: Date;
+  lastSyncedAt?: Date;
+}
+
 export interface TargetAudience {
  primary: string;
  secondary: string[];
@@ -114,6 +123,11 @@ export interface RoadmapFeature {
  userStories: string[];
  linkedSpecId?: string;
  competitorInsightIds?: string[];
+  // External integration fields
+  source?: FeatureSource;
+  externalId?: string;    // ID from external system (e.g., Canny post ID)
+  externalUrl?: string;   // Link back to external system
+  votes?: number;         // Vote count from external system
 }

 export interface Roadmap {
@@ -5,6 +5,23 @@
 import type { NotificationSettings } from './project';
 import type { ChangelogFormat, ChangelogAudience, ChangelogEmojiLevel } from './changelog';

+// Color theme types for multi-theme support
+export type ColorTheme = 'default' | 'dusk' | 'lime' | 'ocean' | 'retro' | 'neo' | 'forest';
+
+export interface ThemePreviewColors {
+  bg: string;
+  accent: string;
+  darkBg: string;
+  darkAccent?: string;
+}
+
+export interface ColorThemeDefinition {
+  id: ColorTheme;
+  name: string;
+  description: string;
+  previewColors: ThemePreviewColors;
+}
+
 // Thinking level for Claude model (budget token allocation)
 export type ThinkingLevel = 'none' | 'low' | 'medium' | 'high' | 'ultrathink';

@@ -28,6 +45,20 @@ export interface PhaseThinkingConfig {
  qa: ThinkingLevel;
 }

+// Feature-specific model configuration (for non-pipeline features)
+export interface FeatureModelConfig {
+  insights: ModelTypeShort;    // Insights chat feature
+  ideation: ModelTypeShort;    // Ideation generation
+  roadmap: ModelTypeShort;     // Roadmap generation
+}
+
+// Feature-specific thinking level configuration
+export interface FeatureThinkingConfig {
+  insights: ThinkingLevel;
+  ideation: ThinkingLevel;
+  roadmap: ThinkingLevel;
+}
+
 // Agent profile for preset model/thinking configurations
 export interface AgentProfile {
  id: string;
@@ -44,6 +75,7 @@ export interface AgentProfile {

 export interface AppSettings {
  theme: 'light' | 'dark' | 'system';
+  colorTheme?: ColorTheme;
  defaultModel: string;
  agentFramework: string;
  pythonPath?: string;
@@ -64,10 +96,18 @@ export interface AppSettings {
  onboardingCompleted?: boolean;
  // Selected agent profile for preset model/thinking configurations
  selectedAgentProfile?: string;
+  // Custom phase configuration for Auto profile (overrides defaults)
+  customPhaseModels?: PhaseModelConfig;
+  customPhaseThinking?: PhaseThinkingConfig;
+  // Feature-specific configuration (insights, ideation, roadmap)
+  featureModels?: FeatureModelConfig;
+  featureThinking?: FeatureThinkingConfig;
  // Changelog preferences
  changelogFormat?: ChangelogFormat;
  changelogAudience?: ChangelogAudience;
  changelogEmojiLevel?: ChangelogEmojiLevel;
+  // Migration flags (internal use)
+  _migratedAgentProfileToAuto?: boolean;
 }

 // Auto-Claude Source Environment Configuration (for auto-claude repo .env)
@@ -356,6 +356,8 @@ export interface WorktreeMergeResult {
  staged?: boolean;
  alreadyStaged?: boolean;
  projectPath?: string;
+  // AI-generated commit message suggestion (for stage-only mode)
+  suggestedCommitMessage?: string;
  // New conflict info from smart merge
  conflicts?: MergeConflict[];
  stats?: MergeStats;
@@ -51,6 +51,33 @@ export function buildCdCommand(path: string | undefined): string {
  return `cd ${escapeShellPath(path)} && `;
 }

+/**
+ * Escape a string for safe use as a Windows cmd.exe argument.
+ *
+ * Windows cmd.exe uses different escaping rules than POSIX shells.
+ * This function escapes special characters that could break out of strings
+ * or execute additional commands.
+ *
+ * @param arg - The argument to escape
+ * @returns The escaped argument safe for use in cmd.exe
+ */
+export function escapeShellArgWindows(arg: string): string {
+  // Escape characters that have special meaning in cmd.exe:
+  // ^ is the escape character in cmd.exe
+  // " & | < > ^ need to be escaped
+  // % is used for variable expansion
+  const escaped = arg
+    .replace(/\^/g, '^^')     // Escape carets first (escape char itself)
+    .replace(/"/g, '^"')      // Escape double quotes
+    .replace(/&/g, '^&')      // Escape ampersand (command separator)
+    .replace(/\|/g, '^|')     // Escape pipe
+    .replace(/</g, '^<')      // Escape less than
+    .replace(/>/g, '^>')      // Escape greater than
+    .replace(/%/g, '%%');     // Escape percent (variable expansion)
+
+  return escaped;
+}
+
 /**
 * Validate that a path doesn't contain obviously malicious patterns.
 * This is a defense-in-depth measure - escaping should handle all cases,
@@ -5,13 +5,13 @@ export default defineConfig({
  test: {
    globals: true,
    environment: 'node',
-    include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
+    include: ['src/**/*.test.ts', 'src/**/*.test.tsx', 'src/**/*.spec.ts', 'src/**/*.spec.tsx'],
    exclude: ['node_modules', 'dist', 'out'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      include: ['src/**/*.ts', 'src/**/*.tsx'],
-      exclude: ['src/**/*.test.ts', 'src/**/*.test.tsx', 'src/**/*.d.ts']
+      exclude: ['src/**/*.test.ts', 'src/**/*.test.tsx', 'src/**/*.spec.ts', 'src/**/*.spec.tsx', 'src/**/*.d.ts']
    },
    // Mock Electron modules for unit tests
    alias: {
@@ -2,16 +2,17 @@
 # Copy this file to .env and fill in your values

 # =============================================================================
-# AUTHENTICATION (REQUIRED - set ONE of the following)
+# AUTHENTICATION (REQUIRED)
 # =============================================================================
-# The framework checks these in order of priority:
-#   1. CLAUDE_CODE_OAUTH_TOKEN - Original (from `claude setup-token`)
-#   2. ANTHROPIC_AUTH_TOKEN   - For proxies like CCR
-#   3. ANTHROPIC_API_KEY      - Direct Anthropic API key
+# Auto Claude uses Claude Code OAuth authentication.
+# Direct API keys (ANTHROPIC_API_KEY) are NOT supported to prevent silent billing.
 #
+# Option 1: Run `claude setup-token` to save token to macOS Keychain (recommended)
+# Option 2: Set the token explicitly:
 # CLAUDE_CODE_OAUTH_TOKEN=your-oauth-token-here
+#
+# For enterprise/proxy setups (CCR):
 # ANTHROPIC_AUTH_TOKEN=sk-zcf-x-ccr
-# ANTHROPIC_API_KEY=sk-ant-...

 # =============================================================================
 # CUSTOM API ENDPOINT (OPTIONAL)
@@ -97,10 +98,11 @@
 #   1. Start your Electron app with remote debugging:
 #      ./YourElectronApp --remote-debugging-port=9222
 #
-#   2. For auto-claude-ui specifically:
+#   2. For auto-claude-ui specifically (use the MCP-enabled scripts):
 #      cd auto-claude-ui
-#      pnpm build
-#      ./dist/mac-arm64/Auto\ Claude.app/Contents/MacOS/Auto\ Claude --remote-debugging-port=9222
+#      pnpm run dev:mcp     # Development mode with MCP debugging
+#      # OR for production build:
+#      pnpm run start:mcp   # Production mode with MCP debugging
 #
 # Note: Only QA agents (qa_reviewer, qa_fixer) receive Electron MCP tools.
 # Coder and Planner agents do NOT have access to these tools to minimize
@@ -140,10 +142,10 @@
 # Choose which providers to use for LLM and embeddings.
 # Default is "openai" for both.

-# LLM provider: openai | anthropic | azure_openai | ollama
+# LLM provider: openai | anthropic | azure_openai | ollama | google
 # GRAPHITI_LLM_PROVIDER=openai

-# Embedder provider: openai | voyage | azure_openai | ollama
+# Embedder provider: openai | voyage | azure_openai | ollama | google
 # GRAPHITI_EMBEDDER_PROVIDER=openai

 # =============================================================================
@@ -191,6 +193,23 @@
 # Available: voyage-3 (1024 dim), voyage-3-lite (512 dim)
 # VOYAGE_EMBEDDING_MODEL=voyage-3

+# =============================================================================
+# GRAPHITI: Google AI Provider
+# =============================================================================
+# Use Google AI (Gemini) for both LLM and embeddings.
+# Get API key from: https://aistudio.google.com/apikey
+#
+# Required: GOOGLE_API_KEY
+
+# Google AI API Key
+# GOOGLE_API_KEY=AIzaSyxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+# Google LLM Model (default: gemini-2.0-flash)
+# GOOGLE_LLM_MODEL=gemini-2.0-flash
+
+# Google Embedding Model (default: text-embedding-004)
+# GOOGLE_EMBEDDING_MODEL=text-embedding-004
+
 # =============================================================================
 # GRAPHITI: Azure OpenAI Provider
 # =============================================================================
@@ -331,3 +350,9 @@
 # AZURE_OPENAI_BASE_URL=https://your-resource.openai.azure.com/...
 # AZURE_OPENAI_LLM_DEPLOYMENT=gpt-5
 # AZURE_OPENAI_EMBEDDING_DEPLOYMENT=text-embedding-3-small
+#
+# --- Example 5: Google AI (Gemini) ---
+# GRAPHITI_ENABLED=true
+# GRAPHITI_LLM_PROVIDER=google
+# GRAPHITI_EMBEDDER_PROVIDER=google
+# GOOGLE_API_KEY=AIzaSyxxxxxxxx
@@ -6,4 +6,18 @@ Multi-agent autonomous coding framework that builds software through
 coordinated AI agent sessions.
 """

-__version__ = "0.1.0"
+import json
+from pathlib import Path
+
+
+def _get_version() -> str:
+    """Get version from package.json (single source of truth)."""
+    package_json = Path(__file__).parent.parent / "auto-claude-ui" / "package.json"
+    try:
+        with open(package_json, encoding="utf-8") as f:
+            return json.load(f).get("version", "0.0.0")
+    except (FileNotFoundError, json.JSONDecodeError, KeyError):
+        return "0.0.0"
+
+
+__version__ = _get_version()
@@ -17,7 +17,7 @@ from linear_updater import (
    linear_task_started,
    linear_task_stuck,
 )
-from phase_config import get_phase_model
+from phase_config import get_phase_model, get_phase_thinking_budget
 from progress import (
    count_subtasks,
    count_subtasks_detailed,
@@ -245,18 +245,18 @@ async def run_autonomous_agent(
        commit_before = get_latest_commit(project_dir)
        commit_count_before = get_commit_count(project_dir)

-        # Get the phase-specific model (respects task_metadata.json configuration)
+        # Get the phase-specific model and thinking level (respects task_metadata.json configuration)
        # first_run means we're in planning phase, otherwise coding phase
        current_phase = "planning" if first_run else "coding"
        phase_model = get_phase_model(spec_dir, current_phase, model)
+        phase_thinking_budget = get_phase_thinking_budget(spec_dir, current_phase)

-        # Create client (fresh context) with phase-specific model
-        # Coding phase uses no extended thinking for fast iteration
+        # Create client (fresh context) with phase-specific model and thinking
        client = create_client(
            project_dir,
            spec_dir,
            phase_model,
-            max_thinking_tokens=None,  # No extended thinking for coding
+            max_thinking_tokens=phase_thinking_budget,
        )

        # Generate appropriate prompt
@@ -9,6 +9,7 @@ import logging
 from pathlib import Path

 from core.client import create_client
+from phase_config import get_phase_thinking_budget
 from task_logger import (
    LogPhase,
    get_task_logger,
@@ -88,8 +89,14 @@ async def run_followup_planner(
        task_logger.start_phase(LogPhase.PLANNING, "Starting follow-up planning...")
        task_logger.set_session(1)

-    # Create client (fresh context)
-    client = create_client(project_dir, spec_dir, model)
+    # Create client (fresh context) with planning phase thinking budget
+    planning_thinking_budget = get_phase_thinking_budget(spec_dir, "planning")
+    client = create_client(
+        project_dir,
+        spec_dir,
+        model,
+        max_thinking_tokens=planning_thinking_budget,
+    )

    # Generate follow-up planner prompt
    prompt = get_followup_planner_prompt(spec_dir)
@@ -19,18 +19,28 @@ TOOL_RECORD_GOTCHA = "mcp__auto-claude__record_gotcha"
 TOOL_GET_SESSION_CONTEXT = "mcp__auto-claude__get_session_context"
 TOOL_UPDATE_QA_STATUS = "mcp__auto-claude__update_qa_status"

+# Puppeteer MCP tools for web browser automation
+# Used for web frontend validation (non-Electron web apps)
+PUPPETEER_TOOLS = [
+    "mcp__puppeteer__puppeteer_connect_active_tab",
+    "mcp__puppeteer__puppeteer_navigate",
+    "mcp__puppeteer__puppeteer_screenshot",
+    "mcp__puppeteer__puppeteer_click",
+    "mcp__puppeteer__puppeteer_fill",
+    "mcp__puppeteer__puppeteer_select",
+    "mcp__puppeteer__puppeteer_hover",
+    "mcp__puppeteer__puppeteer_evaluate",
+]
+
 # Electron MCP tools for desktop app automation (when ELECTRON_MCP_ENABLED is set)
-# Uses puppeteer-mcp-server to connect to Electron apps via Chrome DevTools Protocol.
+# Uses electron-mcp-server to connect to Electron apps via Chrome DevTools Protocol.
 # Electron app must be started with --remote-debugging-port=9222 (or ELECTRON_DEBUG_PORT).
 # These tools are only available to QA agents (qa_reviewer, qa_fixer), not Coder/Planner.
 ELECTRON_TOOLS = [
-    "mcp__electron__electron_connect",  # Connect to Electron app via DevTools
-    "mcp__electron__electron_screenshot",  # Take screenshot of Electron window
-    "mcp__electron__electron_click",  # Click element in Electron app
-    "mcp__electron__electron_fill",  # Fill input field in Electron app
-    "mcp__electron__electron_evaluate",  # Execute JS in Electron renderer
-    "mcp__electron__electron_get_window_info",  # Get window state/bounds
-    "mcp__electron__electron_get_console",  # Get console logs from renderer
+    "mcp__electron__get_electron_window_info",  # Get info about running Electron windows
+    "mcp__electron__take_screenshot",  # Capture screenshot of Electron window
+    "mcp__electron__send_command_to_electron",  # Send commands (click, fill, evaluate JS)
+    "mcp__electron__read_electron_logs",  # Read console logs from Electron app
 ]

 # Base tools available to all agents
@@ -4,12 +4,17 @@ Agent Tool Permissions

 Manages which tools are allowed for each agent type to prevent context
 pollution and accidental misuse.
+
+Supports dynamic tool filtering based on project capabilities to optimize
+context window usage. For example, Electron tools are only included for
+Electron projects, not for Next.js or CLI projects.
 """

 from .models import (
    BASE_READ_TOOLS,
    BASE_WRITE_TOOLS,
    ELECTRON_TOOLS,
+    PUPPETEER_TOOLS,
    TOOL_GET_BUILD_PROGRESS,
    TOOL_GET_SESSION_CONTEXT,
    TOOL_RECORD_DISCOVERY,
@@ -20,15 +25,26 @@ from .models import (
 )


-def get_allowed_tools(agent_type: str) -> list[str]:
+def get_allowed_tools(
+    agent_type: str,
+    project_capabilities: dict | None = None,
+) -> list[str]:
    """
    Get the list of allowed tools for a specific agent type.

    This ensures each agent only sees tools relevant to their role,
    preventing context pollution and accidental misuse.

+    When project_capabilities is provided, MCP tools are filtered based on
+    the project type. For example:
+    - Electron projects get Electron MCP tools
+    - Web frontends (non-Electron) get Puppeteer MCP tools
+    - CLI projects get neither
+
    Args:
        agent_type: One of 'planner', 'coder', 'qa_reviewer', 'qa_fixer'
+        project_capabilities: Optional dict from detect_project_capabilities()
+                            containing flags like is_electron, is_web_frontend, etc.

    Returns:
        List of allowed tool names
@@ -79,9 +95,47 @@ def get_allowed_tools(agent_type: str) -> list[str]:
    mapping = tool_mappings[agent_type]
    tools = mapping["base"] + mapping["auto_claude"]

-    # Add Electron MCP tools for QA agents only (when enabled)
-    # This prevents context bloat for coder/planner agents who don't need desktop automation
-    if agent_type in ("qa_reviewer", "qa_fixer") and is_electron_mcp_enabled():
-        tools.extend(ELECTRON_TOOLS)
+    # Add MCP tools for QA agents only, based on project capabilities
+    if agent_type in ("qa_reviewer", "qa_fixer"):
+        tools.extend(_get_qa_mcp_tools(project_capabilities))
+
+    return tools
+
+
+def _get_qa_mcp_tools(project_capabilities: dict | None) -> list[str]:
+    """
+    Get the list of MCP tools for QA agents based on project capabilities.
+
+    This function determines which MCP tools to include based on:
+    1. Project type detection (Electron, web frontend, etc.)
+    2. Environment variables (ELECTRON_MCP_ENABLED)
+
+    Args:
+        project_capabilities: Dict from detect_project_capabilities() or None
+
+    Returns:
+        List of MCP tool names to include
+    """
+    tools = []
+
+    # If no capabilities provided, fall back to legacy behavior
+    # (check env var only)
+    if project_capabilities is None:
+        if is_electron_mcp_enabled():
+            tools.extend(ELECTRON_TOOLS)
+        return tools
+
+    # Project-capability-based tool selection
+    is_electron = project_capabilities.get("is_electron", False)
+    is_web_frontend = project_capabilities.get("is_web_frontend", False)
+
+    # Electron projects get Electron MCP tools (if enabled)
+    if is_electron and is_electron_mcp_enabled():
+        tools.extend(ELECTRON_TOOLS)
+
+    # Web frontends (non-Electron) get Puppeteer tools
+    # Puppeteer is always available, no env var check needed
+    if is_web_frontend and not is_electron:
+        tools.extend(PUPPETEER_TOOLS)

    return tools
--- a/Show More
+++ b/Show More